How to Simulate `background-size: cover` for HTML Elements like Video and Images?

Can You Simulate Background-Size: Cover on HTML Elements?

Background-size: cover is an essential CSS property for scaling images to fit within a container element while preserving their aspect ratio. However, this functionality is not natively supported for HTML elements like video and img tags.

Achieving Background-Size: Cover with CSS

Fortunately, there exists a CSS-only solution that effectively simulates this behavior, eliminating script dependencies. Here's the 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>

Setting the video's height to 100% makes it proportionally fill its parent element's height. The calculated width ensures that the video's aspect ratio is maintained while allowing it to scale up to cover the full parent element when necessary. The min-width and min-height prevent the video from shrinking below its natural dimensions.

Centering the Video

To center the video within its parent element, add the following 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>

This approach ensures that the video is perfectly centered in all cases.

Note: If your video has a different aspect ratio, adjust the width and min-height calculations accordingly to maintain the desired proportions.

The above is the detailed content of How to Simulate `background-size: cover` for HTML Elements like Video and Images?. For more information, please follow other related articles on the PHP Chinese website!