影片高度50％

Question

我目前在一个网站上工作，我希望顶部是幻灯片/旋转木马之类的东西，但视频而不是图片。

视频应具有整页的宽度，可以正常工作，但我无法碰巧调整高度。

该视频的高度“很大”，所以我尝试只显示其中一半。

我尝试通过限制父div的高度来做到这一点，但视频始终在该div之外“重叠”。

Answer 1

将overflow: hidden添加到视频的div。因此，div将隐藏div的所有溢出内容。

Answer 2

我相信您正在寻找类似的东西。它将保持宽高比。

<div class="container"> 
  <video></video>
</div>

.container {
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

参考：https://www.w3schools.com/howto/howto_css_aspect_ratio.asp 或如Mantas所述，执行overflow: hidden，但这会裁剪视频。