使 HTML5 视频适合父元素大小

Question

我在 <div> 中有一个 <video> 元素，当页面上的其他元素动态调整/添加/删除时，它会自动调整大小。

我希望视频元素也自动调整大小，以便它始终包含在其背景 div 中；如果我将视频元素的 CSS 高度和宽度设置为 100%，这种工作方式是可行的，因此它始终与其容器的大小相同。但是，如果包含 div 的尺寸低于视频图像的固有 videoWidth 或 videoHeight，那么它开始表现得好像 CSS 高度/宽度属性指的是视频图像固有尺寸的百分比，而不是容器 div！例如，如果 CSS 高度为 100%，它会正常缩放，但它具有视频固有高度的最小尺寸；如果 CSS 高度为 50%，它会正常缩放，但最小尺寸为视频固有高度的 50%。

我可以通过使用 JavaScript 定期将视频元素的像素高度重置为容器的计算高度来解决这个问题，但这真的很慢而且不稳定。有什么办法可以在 CSS 中解决这个问题，以便视频元素的大小正确？

Answer 1

我很清楚这是一个较老的问题，但我一直在努力使用 CSS 完成布局，其中视频会自动调整大小以适合某个框（通常在父元素内）。

仅使用width和height静态定位仅适用于父子拓扑的某些配置，并且很大程度上取决于拓扑的样式。即使您使用某些元素来正确计算其边界，一旦您将正在播放的视频元素放入其中，它就会扩展父母允许的框，即使这是您期望的最不明智的行为。

添加一些fieldset元素，您就会陷入 CSS 和浏览器特性的兔子洞中。

我发现最简单的方法是将视频元素从其定位上下文中取出，使用position: absolute. 这并不意味着它在视觉上表现不佳——使用width: 100%和height: 100%有效地使其正确地约束自己，否则它应该（但不会）。然后，您需要添加position: relative视频元素的适当祖先元素，否则视频将相对于文档根绝对定位，这很可能不是您想要的。

省略left并right起作用是因为绝对定位不会重置位置，只是切换计算方法。您也可以将这两个属性设置为零，然后将视频与偏移父级左上角对齐。max-width并且max-height是不必要的——我只是看到在很多情况下人们都在努力限制他们的视频元素——不要打扰。

您可以为视频元素或其偏移父元素指定背景颜色。这样，您将获得信箱效果，例如视频两侧的黑条。

Answer 2

由于您video位于 a 内div，因此可以通过将视频的宽度和高度设置为 来解决此问题100%。这使得视频占据了100%的div元素。

标记示例：

<div id="video_container">
   <video></video>
</div>

样式表：

#video_container video {
    width: 100%;
    height: 100%;
}