模拟背景大小:<视频>或<img>上的封面

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (44)

如何模拟background-size:cover在html元素上,如<video><img>?

我希望它能像

background-size: cover;
background-position: center center;
提问于
用户回答回答于

这是我一段时间以来一直想要解决的问题,但我遇到了一个很棒的解决方案,它不使用任何脚本,可以通过5行CSS(如果算上选择器和括号)在视频上实现完美的封面模拟。

如果周围的元素比视频文件小,则不会缩小。即使你给这个视频标签一个很小的初始尺寸,比如16 px乘9 px,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 */
}

当然,vwvh,和transform是CSS 3。

用户回答回答于

jsFiddle

使用背景覆盖是很好的图像,宽度也是100%。这些都不是最适合的<video>这些答案过于复杂。不需要jQuery或JavaScript来完成全宽度的视频背景。

请记住,我的代码不会像封面那样完全覆盖背景,而是会使视频变得更大,因为它需要维持高宽比,并且仍然覆盖整个背景。任何多余的视频都会从页面边缘流血,这取决于你锚定视频的位置。

只需使用以下HTML 5视频代码,或类似的内容:(测试全文)

html, body {
  width: 100%; 
  height:100%; 
  overflow:hidden;
}

#vid{
  position: absolute;
  top: 50%; 
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  min-width: 100%; 
  min-height: 100%; 
  width: auto; 
  height: auto;
  z-index: -1000; 
  overflow: hidden;
}
<video id="vid" video autobuffer autoplay>
  <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>

最小高度和最小宽度将允许视频保持视频的高宽比,这通常是任何正常浏览器在正常分辨率下的纵横比。任何多余的视频都会从页面的侧面流出来。

扫码关注云+社区