Wie erreicht man das Verhalten „background-size: cover“ bei Video- und Bildelementen nur mit CSS?

Erzielen des Verhaltens von „background-size: cover“ bei Video- und Bildelementen

Wenn Sie versuchen, die Funktionalität von „background-size :cover“ für Elemente wie

Das Problem mit früheren Lösungen

Timothys Lösung ist zwar in einigen Szenarien effektiv, schlägt jedoch fehl um die Skalierung korrekt zu handhaben, was zu unerwünschten Zoomeffekten führt, wenn das übergeordnete Element des Videos kleiner als die Videodatei ist.

Die verbesserte Lösung

Wenn das Seitenverhältnis des Videos bekannt ist B. 16:9, erzielt dieser CSS-Code den gewünschten Effekt:

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

Dieser Code setzt die Höhe auf 100 % des Containers und die Breite auf einen berechneten Wert basierend auf dem Seitenverhältnis. Die Mindestbreite und -höhe stellen sicher, dass eine Verkleinerung erfolgt, wenn der Container kleiner als die Videodatei ist.

Zentrieren des Videos

Verwenden Sie zum Zentrieren das folgende CSS:

<code class="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>

Dadurch wird das Video absolut positioniert und mithilfe von Translate in seinem übergeordneten Element zentriert.

Kompatibilitätsüberlegungen

Beachten Sie, dass VW, VH und transform sind CSS3-Funktionen. Aus Gründen der Kompatibilität mit älteren Browsern müssen Sie möglicherweise auf JavaScript zurückgreifen.

Das obige ist der detaillierte Inhalt vonWie erreicht man das Verhalten „background-size: cover“ bei Video- und Bildelementen nur mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!