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，看看它是越來越設置在其他地方。