將HTML5視頻與父元素大小相匹配

Question

我在<div>中有一個<video>元素，當頁面上的其他元素被動態調整大小/添加/刪除時，它會自動調整大小。

我希望視頻元素也能自動調整大小，以便它始終保持在其背景div中; 如果我將視頻元素的CSS高度和寬度設置為100％，這種類型的工作，所以它總是與容器的大小相同。 但是，如果包含div的尺寸低於視頻圖像固有的videoWidth或videoHeight，那么它開始表現得好像CSS高度/寬度屬性指的是視頻圖像固有尺寸的百分比，而不是容器div！ 例如，如果CSS高度為100％，它會正常縮放，除非它具有視頻固有高度的最小尺寸; 如果CSS高度為50％，它會正常縮放，但最小尺寸為視頻固有高度的50％。

我可以解決這個問題，通過使用JavaScript定期將視頻元素的高度（以像素為單位）重置為容器的計算高度，但這確實很慢並且不穩定。 有沒有辦法在CSS中修復此問題，以便視頻元素的大小合適？

Answer 1

我很清楚這是一個較老的問題，但我一直在努力完成CSS的布局，其中視頻自動調整大小以適合某些框，通常在父元素內。

僅使用width和height與靜態定位僅適用於父子拓撲的某些配置，並且還很大程度上取決於拓撲的樣式。 即使你得到一些元素來正確計算它的邊界，一旦你在其中放置一個播放的視頻元素，它將擴展父母允許的框，即使這是你期望的最不明智的行為。

拋出一些fieldset元素，你就陷入了CSS和瀏覽器特性的兔子洞。

我發現最簡單的方法是使用position: absolute將視頻元素從其定位上下文中取出。 這並不意味着它在視覺上表現不佳 - 使用width: 100%和height: 100%有效地使其適當地約束自己，否則它應該（但不會）。 然后，您需要添加position: relative對於視頻元素的相應祖先元素，否則視頻將與文檔根目錄絕對定位，這很可能不是您想要的。

省略left和right的作品，因為絕對定位不會重置的位置，只是切換的計算方法。 您也可以將兩個屬性設置為零，然后將視頻對齊到偏移的父左上角。 max-width和max-height是不必要的 - 我只是看到在許多人們努力限制他們的視頻元素的情況下拋出這些 - 不要打擾。

您可以為視頻元素或其偏移父級指定背景顏色。 這樣你就會得到信裝效果 - 比如視頻兩側的黑條。

Answer 2

由於您的video位於div ，因此可以通過將視頻的寬度和高度設置為100%來解決。 這使得視頻占據了div元素的100％。

標記示例：

<div id="video_container">
   <video></video>
</div>

樣式表：

#video_container video {
    width: 100%;
    height: 100%;
}