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

Question

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

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

Answer 1

根据the box model, in the section on replaced elements，这应该可以按您的预期工作：由于视频具有auto 的height 和一组width，并且它具有an intrinstic ratio（就像视频一样），那么使用高度值应根据这些计算。确保您没有在任何地方指定 height — 以下 CSS 对我有用：

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

尝试在视频中显式添加height: auto — 可以使用!important 来查看它是否设置在其他位置。