使 HTML5 视频适合父元素大小

Question

我在

中有一个

【问题讨论】：

• 容器的纵横比似乎与视频内容固有纵横比不匹配（渲染时始终保留视频内容固有纵横比）
• 视频图像应该在视频元素的边界内进行信箱处理，以保持其纵横比；视频元素本身应该是相当大的，但是你喜欢，这通常是有效的。我终于让它工作了，但原因却让我无法理解；请参阅jsfiddle.net/gliese1337/Djbvj/20 的小提琴。如果您将视频位置设置为“绝对”，它可以工作。如果您从 CSS 中删除该行，它的行为会莫名其妙。
• @jammypeach 呃，怎么样？我一直盯着这两个问题以及海报问题上给出的答案大约 10 分钟，老实说，我无法理解你怎么能认为它们是相同的。此问题与视频海报图像无关，或与视频大小匹配任何内容。这是视频的问题，而不是视频图像，元素缩放奇怪。
• @LoganR.Kearsley 就我而言，我有一个紧张的时刻并且错误地标记了这一点 - 我很抱歉。我已提名重新开放。不知道为什么其他人都同意！我仍然认为这是一个骗局，但你是对的，这不是我选择的那个骗局。

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%;
}