如何模拟视频和图像等 HTML 元素的“background-size: cover”？

你能在 HTML 元素上模拟背景大小：覆盖吗？

背景大小：覆盖是一个重要的 CSS 属性，用于将图像缩放到适合容器元素，同时保持其纵横比。然而，视频和 img 标签等 HTML 元素本身不支持此功能。

实现背景大小：用 CSS 覆盖

幸运的是，存在一个 CSS-唯一能够有效模拟此行为、消除脚本依赖性的解决方案。技巧如下：

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

将视频的高度设置为 100% 可以使其按比例填充其父元素的高度。计算出的宽度可确保保持视频的宽高比，同时允许视频在必要时放大以覆盖整个父元素。最小宽度和最小高度可防止视频缩小到低于其自然尺寸。

使视频居中

要将视频在其父元素中居中，请添加以下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>

此方法可确保视频在所有情况下都完美居中。

注意：如果您的视频具有不同的宽高比，请调整相应地计算宽度和最小高度以保持所需的比例。

以上是如何模拟视频和图像等 HTML 元素的“background-size: cover”？的详细内容。更多信息请关注PHP中文网其他相关文章！