如何仅使用 CSS 在视频和图像元素上实现'background-size: cover”行为？

在视频和图像元素上实现“background-size: cover”行为

当您寻求模拟“background-size”的功能时: 覆盖”诸如

先前解决方案的问题

Timothy 的解决方案虽然在某些情况下有效，但会失败正确处理缩放，当视频的父元素小于视频文件时，会导致不必要的缩放效果。

改进的解决方案

如果视频的宽高比已知例如16:9，这段CSS代码将达到预期的效果：

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

这段代码将高度设置为容器的100%，将宽度设置为根据长宽比计算出的值。如果容器小于视频文件，最小宽度和高度可确保缩小尺寸。

使视频居中

要居中，请使用以下 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>

这会将视频绝对定位，并使用翻译将其在其父元素中居中。

兼容性注意事项

请注意，VW、VH 和变换是 CSS3 功能。为了与旧版浏览器兼容，您可能需要求助于 JavaScript。

以上是如何仅使用 CSS 在视频和图像元素上实现'background-size: cover”行为？的详细内容。更多信息请关注PHP中文网其他相关文章！