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

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

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

我已经发现，至少在Chrome上，video标签不允许将height用作百分比，很遗憾，W3C规范对此表示同意。我已经尝试过将trick与带有padding-bottom: 56.25%的相对定位的视频包装器一起放入，然后将绝对定位的视频放入其中，但是如果容器也太小，它仍然会切掉视频的底部宽。

这是一个jsfiddle；比在这里写要容易得多：https://jsfiddle.net/darkstarsys/q1fr9jwd/2/ 在该处，您会看到视频对其容器的宽度做出了正确的反应，但是当高度较小时，视频的底部将被切除。播放main元素的高度和宽度，以了解其对容器大小的反应。

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

解决方法

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

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