让 HTML5 视频适合父元素大小

我在

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

我可以通过使用 JavaScript 定期将视频元素的高度（以像素为单位）重置为容器的计算高度来解决此问题，但这确实很慢且不稳定。有什么方法可以在 CSS 中修复此问题，以便视频元素的大小正确吗？

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

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

扔一些fieldset元素，你就陷入了 CSS 和浏览器特性的兔子洞。

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

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

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