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

【问题标题】：Resize HTML video to fit into parent container height *and* width调整 HTML 视频的大小以适应父容器的高度 * 和 * 宽度
【发布时间】：2021-02-08 05:42:05
【问题描述】：

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

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

这是一个 jsfiddle；在那里看到比写下来更容易：https://jsfiddle.net/darkstarsys/q1fr9jwd/2/ 在那里，您会看到视频对其容器的宽度做出了正确的反应，但是当高度较小时，视频的底部会被切断。调整main 元素的高度和宽度，看看它对容器大小的反应。

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

【问题讨论】：

这里有 CSS object-fit: contain;
@Ouroborus，这是真的，但它似乎在那里不起作用。如果将其添加到 jsfiddle 中，您可以看到。

标签： html css video

【解决方案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 */
}

【讨论】：