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

Question

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

是否可以像这样动态调整视频元素的大小而不诉诸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，看看它是越来越设置在其他地方。