How to Achieve \"background-size: cover\" Behavior on Video and Image Elements Using Only CSS?

Achieving "background-size: cover" Behavior on Video and Image Elements

As you seek to simulate the functionality of "background-size: cover" on elements like

The Problem with Previous Solutions

Timothy's solution, while effective in some scenarios, fails to handle scaling correctly, resulting in unwanted zoom effects when the video's parent element is smaller than the video file.

The Improved Solution

If the video's aspect ratio is known, such as 16:9, this CSS code will achieve the desired effect:

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

This code sets the height to 100% of the container and the width to a calculated value based on the aspect ratio. The minimum width and height ensure scaling down occurs if the container is smaller than the video file.

Centering the Video

For centering, employ the following 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>

This positions the video absolutely and uses translate to center it within its parent element.

Compatibility Considerations

Note that VW, VH, and transform are CSS3 features. For compatibility with older browsers, you may need to resort to JavaScript.

The above is the detailed content of How to Achieve \"background-size: cover\" Behavior on Video and Image Elements Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!