Question

我知道有很多关于这个主题的问题，但是我找不到合适的解决方案。

我的网站顶部有一个#banner元素，高710px。

在此#banner我的视频应该始终像＆＃34;背景大小：封面＆＃34;。如果视频在顶部或底部被剪切并不重要，它应该始终填充#banner元素。

#banner {
    position:relative;
    opacity:0;
    height:710px;
    width:100%;
    overflow:hidden;
}

#banner .video {
    position: absolute;
    bottom: 50%; 
    right: 50%;
    transform: translateX(-50%) translateY(-50%);
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto;
    overflow: hidden;   
}

我发现此代码正确here，但它并不适合我。缩放浏览器窗口时，视频不会调整大小。对我来说，这不起作用。

此外，我尝试使用covervid插件，该插件似乎非常适合全背景尺寸但不适合固定高度的横幅。如果我使用这个插件并调整窗口大小，它会从宽度跳到高度拟合，总是将宽度或高度设置为自动。

知道如何通过css或js做到这一点吗？

Answer 1

只需从横幅中删除不透明度并添加max-height:100%即可确保没有垂直滚动

<强> DEMO

html,
body {
  margin: 0;
  height: 100%;
}
#banner {
  position: relative;
  height: 710px;
  border: 5px solid tomato;
  overflow: hidden;
  max-height: 100%;
  box-sizing: border-box;
}
#banner .video {
  min-width: 100%;
  min-height: 100%;
}

<div id="banner">
  <video class="video" autoplay>
    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
  </video>
</div>

封面 - 横幅元素中的视频：始终居中，全宽和高度

1 个答案: