Wie erreicht man den „background-size: cover“-Effekt mit „“- und „Elementen“ mithilfe von CSS?

So replizieren Sie die Hintergrundgröße:cover auf

Bei der Arbeit mit HTML-Elementen wie

CSS-Ansatz

Mit CSS allein können Sie eine perfekte Coversimulation für Videos erstellen, ohne auf Skripte angewiesen zu sein. Der Trick besteht darin, die Breite und Höhe des Videos im Verhältnis zum Seitenverhältnis des übergeordneten Elements genau zu berechnen. Wenn Ihr Video beispielsweise ein Seitenverhältnis von 16:9 hat:

<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>

Zentrieren des Videos

Wenn Sie das Video auch zentrieren müssen, verwenden Sie das folgende CSS bietet einen zuverlässigen Ansatz:

<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>

Kompatibilitätsüberlegungen

Während diese Lösung in CSS3-kompatiblen Browsern einwandfrei funktioniert, ist für ältere Browser möglicherweise ein skriptbasierter Ansatz erforderlich das gewünschte Ergebnis.

Das obige ist der detaillierte Inhalt vonWie erreicht man den „background-size: cover“-Effekt mit „“- und „Elementen“ mithilfe von CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!