将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位于div ，因此可以通过将视频的宽度和高度设置为100%来解决。 这使得视频占据了div元素的100％。

标记示例：

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

样式表：

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