css - HTML5 视频 : Retain aspect ratio when resizing

Question

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

是否可以在不借助 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 看看它是否在其他地方设置。