调整 HTML 视频大小以适合父容器的高度*和*宽度

Question

我读过很多关于调整视频大小以适应浏览器和/或父元素的帖子，但没有一个能满足我的需要。我有一个单页应用程序，overflow: hidden因此该应用程序不会滚动。该应用程序有各种display:flex容器，我想要在其中一个容器中有一个 16x9 的视频。我希望整个视频始终适合其容器（因此，如果容器太宽，顶部/底部将有条，如果容器太高，左/右将有条）。我可以width: 100%在视频上使用它来根据容器宽度调整其大小，但我无法找出任何方法让它在容器高度变小时缩小以适应。（我猜这是因为大多数网页都是垂直增长的，所以基于高度的限制不太重要。）

我发现，至少在 Chrome 上，video标签不允许height是百分比，不幸的是，W3C 规范也同意这一点。我尝试过使用相对定位的视频包装器，padding-bottom: 56.25%然后将绝对定位的视频放入其中，但当容器太宽时，它仍然会切断视频的底部。

这是一个jsfiddle；看到那里比写它更容易： https: //jsfiddle.net/darkstarsys/q1fr9jwd/2/ 在那里你会看到视频对其容器的宽度做出正确的反应，但是当高度很小。调整main元素的高度和宽度，看看它对其容器大小有何反应。

如果可能的话，我想避免使用基于 Javascript 的解决方案；看起来 CSS 应该能够以某种方式做到这一点。

Answer 1

我不确定这是否是您想要的，但请尝试一下：

.main {
  /*overflow: hidden;*/
  
  /* TRY ASPECT RATIOS HERE 
  800w x 300h doesn't work -- bottom gets cut off */
  width: 800px;
  height: 300px;
  background: red;
}
.video-wrapper {
  display: flex;
  height: 100%;
}
.video {
  width: 100%;
  height: auto; /* spec says no percent allowed here */
}