javascript - 模拟背景大小 :cover on <video> or <img>

Question

如何模拟background-size:cover 的功能？在像 <video> 这样的 html 元素上或 <img> ?

我希望它像这样工作

background-size: cover;
background-position: center center;

Answer 1

这是我一段时间以来的烦恼，但我遇到了一个很棒的解决方案，它不使用任何脚本，并且可以使用 5 行 CSS(如果算上 9 行)在视频上实现完美的封面模拟选择器和括号)。 这有 0 个边缘情况不能完美运行，缺少 CSS3 兼容性。

你可以看一个例子 here (存档)

Timothy's solution 的问题，是它不能正确处理缩放。如果周围元素小于视频文件，则不会按比例缩小。即使你给视频标签一个很小的初始大小，比如 16 像素 x 9 像素，auto 最终也会强制它达到其原始文件大小的最小值。使用此页面上当前投票率最高的解决方案，我不可能将视频文件按比例缩小，从而产生剧烈的缩放效果。

如果您的视频的宽高比已知，例如 16:9，您可以执行以下操作:

.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 */
}

如果视频的父元素设置为覆盖整个页面(如position: fixed; width: 100%; height: 100vh;)，那么视频也会。

如果您也希望视频居中，您可以使用万无一失的居中方法:

/* 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 */
}

当然，vw、vh、transform都是CSS3，所以如果需要compatibility with much older browsers ，你需要使用脚本。