HTML5视频：调整大小时保持宽高比

Question

9

我有一个视频元素，设置为容器div的100％宽度。该div具有最大宽度为800px和最小宽度为400px。当调整浏览器大小时，我需要视频元素重新调整大小，同时保持其原始宽高比。目前它会按照宽度进行调整，但保留其原始高度，从而在上下添加letterbox条以弥补。

是否可以动态调整视频元素大小，而无需使用Javascript？

- Brandon Durham

你将高度设置为多少？这是静态的测量吗？ - Eran Galperin

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh Lee · Accepted Answer

根据盒模型中有关替换元素的部分，此方法应该按您所期望的方式工作：由于视频具有自动高度和设置的宽度，并且它具有固有比率（像视频一样），因此高度的使用值应该基于这些计算。确保您没有在任何地方指定height - 对我来说，以下CSS有效：

video {
    width: 100%;
}
div {
    max-width: 800px;
    min-width: 400px;
}

尝试显式地添加height: auto到视频中，可能需要使用!important来查看是否在其他地方设置了它。