Heim > Artikel > Web-Frontend > 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!