Wie simuliere ich „background-size: cover' für HTML-Elemente wie Videos und Bilder?

Können Sie Background-Size: Cover für HTML-Elemente simulieren?

Background-size: Cover ist eine wesentliche CSS-Eigenschaft zum Skalieren von Bildern passen in ein Containerelement und behalten dabei ihr Seitenverhältnis bei. Diese Funktionalität wird jedoch nicht nativ für HTML-Elemente wie Video- und IMG-Tags unterstützt.

Hintergrundgröße erreichen: Mit CSS abdecken

Glücklicherweise gibt es eine CSS- einzige Lösung, die dieses Verhalten effektiv simuliert und Skriptabhängigkeiten eliminiert. Hier ist der Trick:

<code class="css">.parent-element-to-video {
    overflow: hidden;
}
video {
    height: 100%;
    width: 177.77777778vh; /* 100 * 16 / 9 (for 16:9 aspect ratio videos) */
    min-width: 100%;
    min-height: 56.25vw; /* 100 * 9 / 16 (for 16:9 aspect ratio videos) */
}</code>

Wenn Sie die Höhe des Videos auf 100 % einstellen, füllt es proportional die Höhe seines übergeordneten Elements aus. Die berechnete Breite stellt sicher, dass das Seitenverhältnis des Videos beibehalten wird, während es bei Bedarf skaliert werden kann, um das gesamte übergeordnete Element abzudecken. Die Mindestbreite und Mindesthöhe verhindern, dass das Video unter seine natürlichen Abmessungen schrumpft.

Zentrieren des Videos

Um das Video innerhalb seines übergeordneten Elements zu zentrieren, fügen Sie das hinzu folgendes CSS:

<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 stellt sicher, dass das Video in jedem Fall perfekt zentriert ist.

Hinweis:Wenn Ihr Video ein anderes Seitenverhältnis hat, passen Sie das an Breiten- und Mindesthöhenberechnungen entsprechend, um die gewünschten Proportionen beizubehalten.

Das obige ist der detaillierte Inhalt vonWie simuliere ich „background-size: cover' für HTML-Elemente wie Videos und Bilder?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!