模拟背景大小：覆盖<视频>或<图像>

javascript jquery css

2022-08-30 01:31:59

如何模拟 html 元素（如或？background-size:cover<video><img>

我希望它像这样工作

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

答案 1

这是我暂时拉扯头发的东西，但我遇到了一个很棒的解决方案，它不使用任何脚本，并且可以在视频上实现完美的封面模拟，有5行CSS（如果算上选择器和括号，则为9）。这有0个边缘情况，其中它不能完美地工作，缺乏CSS3兼容性。

您可以在此处查看示例（已存档）

Timothy解决方案的问题在于它不能正确处理缩放。如果周围的元素小于视频文件，则不会缩小它。即使您为视频标签指定了很小的初始大小（例如16px x 9px），最终也会强制将其设置为其本机文件大小的最小值。使用此页面上当前投票最多的解决方案，我不可能缩小视频文件，从而产生剧烈的缩放效果。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;

如果您还希望视频居中，则可以使用 surefire 居中方法：

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

当然，、和是 CSS3，因此，如果您需要与旧得多的浏览器兼容，则需要使用脚本。vwvhtransform

答案 2

对于您可以使用的某些浏览器

object-fit: cover;

http://caniuse.com/object-fit