HTML5视频：调整大小时保留纵横比

Question

我在容器div中将视频元素设置为100％宽度。该div的最大宽度为800px，最小宽度为400px。调整浏览器大小时，我需要在保持原始宽高比的同时调整视频元素的大小。目前它在宽度上调整大小，但保持其原始高度，在上方和下方添加信箱条以弥补它。

是否可以像这样动态调整视频元素的大小而不需要使用Javascript？

Answer 1

根据the box model, in the section on replaced elements，这应该可以正常运作：由于视频的height auto和width集合，因此an intrinstic ratio （如视频那样），然后应根据这些值计算高度的使用值。确保您没有在任何地方指定height - 以下CSS对我有效：

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

尝试向视频明确添加height: auto - 也许与!important一起查看是否已在其他地方设置。