Javascript 将HTML5视频调整到父元素大小

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

我想视频元素也自动调整大小，使其始终包含在其背景div中；如果我将视频元素的CSS高度和宽度设置为100%，那么它的大小总是与其容器的大小相同。但是，如果包含div的维度低于视频图像的固有videoWidth或videoHeight，那么它的行为就好像CSS height/width属性指的是视频图像固有维度的百分比，而不是容器div！例如，如果CSS高度为100%，则除具有视频固有高度的最小尺寸外，它的缩放正常；如果CSS高度为50%，则正常缩放，但最小尺寸为视频固有高度的50%

---

我可以通过使用JavaScript定期将视频元素的高度（以像素为单位）重置为容器的计算高度来解决这一问题，但这确实是一个缓慢而多变的过程。有没有办法在CSS中解决此问题，以便视频元素的大小正确？

由于您的

视频

位于

div

中，可以通过将视频的宽度和高度设置为

100%

来解决此问题。这使得视频占据

div

元素的100%

标记示例：

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

---

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

仅使用带有静态定位的

宽度

和

高度

仅在父子拓扑的特定配置中有效，并且在很大程度上取决于拓扑的样式。即使您让某些元素正确计算其边界，一旦您将播放视频元素放入其中，它将扩展父级允许框，即使这是您所期望的最不合理的行为

再加上一些

fieldset

元素，你就陷入了CSS和浏览器特性的兔子洞

我发现，使用

position:absolute

将视频元素从其定位上下文中移除是最简单的。这并不意味着它在视觉上表现不好——使用

width:100%

和

height:100%

可以有效地使它像本来应该的那样（但不会）适当地约束自己。然后，您需要将

position:relative

添加到视频元素的相应祖先元素，否则视频将绝对相对于文档根进行定位，这很可能不是您想要的

省略

左侧

和

右侧

会起作用，因为绝对定位不会重置位置，只会切换计算方法。您也可以将这两个属性设置为零，然后将视频与偏移父对象左上角对齐

max width

和

max height

是不必要的——我刚刚看到在很多情况下，人们都在努力约束自己的视频元素，所以不必麻烦了

---

可以为视频元素或其偏移父元素指定背景色。通过这种方式，您将获得字母装箱效果——例如，视频侧面的黑条。

容器的纵横比似乎与视频内容固有纵横比不匹配（渲染时，视频内容固有纵横比始终保持不变）为了保持视频图像的纵横比，视频图像应该被置于视频元素的边界内；视频元素本身应该是相当大的，但你喜欢，这通常是工作。我终于让它起作用了，但我找不到原因；看到小提琴在演奏。如果您将视频位置设置为“绝对”，它将工作。如果从CSS中删除该行，它的行为会令人费解。@jammypeach，呃，如何？我已经盯着这两个问题和海报上的答案看了大约10分钟了，我真的不明白你怎么会认为它们是一样的。这个问题与视频海报图像无关，也与视频大小无关。这是视频的问题，而不是视频图像的问题，元素比例奇怪。@LoganR.Kearsley对于我来说，我有一个密集的时刻，并错误地表达了这一点-我的道歉。我已经提名重新开张。不知道为什么其他人都同意！我仍然认为这是一个骗局，但你是对的，这不是我选择的那个骗局。这正是我第一次做的。这是显而易见的应该起作用的事情。但事实并非如此（或者至少三年前没有；以后的几个浏览器版本可能不再如此）。正如我在问题中所说：“如果包含div的维度低于视频图像的固有videoWidth或videoHeight，那么它开始表现为CSS height/width属性指的是视频图像固有维度的百分比，而不是容器div！”这就是我需要解决的问题。我认为底线是浏览器总是保留视频的纵横比。用户代理是否保留纵横比与问题几乎没有关系——即使保留纵横比，计算最大高度或宽度在数学上和其他方面都很简单，根据哪个约束更适用，计算其他尺寸，以便纵横比正确。这就是你在4:3屏幕上观看字母框电影的方式，或者在现代宽屏电视上观看4:3内容的电影。你有黑条。如果使用

视频

，则可以使用

背景色

属性来实现这一点。

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