时间戳

首页 > 解决方案 > 调整 HTML 视频的大小以适应父容器的高度 * 和 * 宽度

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

问题描述

我已经阅读了很多关于调整视频大小以适应浏览器和/或父元素的 SO 帖子，但它们都没有满足我的需求。我有一个单页应用程序，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 应该能够以某种方式做到这一点。

标签： htmlcssvideo

解决方案

我不确定这是否是你想要的，但试试看：

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

推荐阅读