Wie erreicht man mit CSS die Funktionalität „background-size: cover“ für HTML-Elemente?

So erreichen Sie die Funktionalität von „background-size:cover“ für HTML-Elemente mit CSS

Simulieren der Funktionalität von „background-size:cover“ für HTML-Elemente wie Videos oder Bilder können eine knifflige Aufgabe sein. Mithilfe einer Kombination von CSS-Eigenschaften ist es jedoch möglich, eine Lösung zu erstellen, die das gewünschte Verhalten ohne Skripting nachahmt.

Die CSS-Lösung

Der Schlüssel zum Erreichen von Hintergrundinformationen -size:cover dient dazu, die Höhe, Breite und Mindestabmessungen des Videoelements entsprechend festzulegen. Durch die Verwendung berechneter Werte basierend auf dem Seitenverhältnis des Videos (z. B. 16:9) können wir sicherstellen, dass das Video immer so skaliert wird, dass es den verfügbaren Platz abdeckt und gleichzeitig sein Seitenverhältnis beibehält.

<code class="css">.parent-element-to-video {
  overflow: hidden;
}

video {
  height: 100%;
  width: 177.77777778vh; /* 100 * 16 / 9 */
  min-width: 100%;
  min-height: 56.25vw; /* 100 * 9 / 16 */
}</code>

Dieses CSS stellt dies sicher Das Video deckt das gesamte übergeordnete Element ab, unabhängig von seiner Größe.

Optionale Zentrierung

Auf Wunsch können wir das Video mithilfe der folgenden Eigenschaften auch innerhalb des übergeordneten Elements zentrieren :

<code class="css">/* Merge with above CSS */
.parent-element-to-video {
  position: relative; /* or absolute or fixed */
}

video {
  position: absolute;
  left: 50%; /* % of surrounding element */
  top: 50%;
  transform: translate(-50%, -50%); /* % of current element */
}</code>

Dieser Ansatz funktioniert perfekt ohne Randfälle und bietet eine zuverlässige Lösung für die Simulation von „background-size:cover“ auf Videoelementen. Es ist zu beachten, dass die verwendeten CSS3-Eigenschaften möglicherweise nicht mit älteren Browsern kompatibel sind, sodass für eine vollständige browserübergreifende Kompatibilität möglicherweise skriptbasierte Lösungen erforderlich sind.

Das obige ist der detaillierte Inhalt vonWie erreicht man mit CSS die Funktionalität „background-size: cover“ für HTML-Elemente?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!