修復HTML5視頻到父元素大小

我在< div>中有一個<視頻>元素，當頁面上的其他元素動態調整大小/添加/刪除時，它會自動調整大小。修復HTML5視頻到父元素大小

我想視頻元素也自動調整大小，以便它始終保持其背景div;如果我將視頻元素的CSS高度&寬度設置爲100％，則此工作方式有效，因此它的容量始終與其大小相同。但是，如果包含div的尺寸低於視頻圖像固有的videoWidth或videoHeight，則它開始表現得好像CSS高度/寬度屬性指的是視頻圖像固有尺寸的百分比，而不是容器div！例如，如果CSS高度爲100％，則除了具有視頻固有高度的最小尺寸之外，其通常會縮放;如果CSS高度爲50％，則它會正常縮放，但最小尺寸爲視頻固有高度的50％。

我可以通過使用JavaScript定期重置視頻元素的高度（以像素爲單位）來計算容器的高度，但這確實很慢且不連貫。有沒有什麼辦法可以解決這個問題，以便視頻元素的大小適當？

來源

2011-11-12 Logan R. Kearsley

你有小提琴嗎？ – jQuerybeast

看起來，容器的縱橫比與視頻內容固有的縱橫比不匹配（渲染時，視頻內容固有縱橫比始終保持不變） – ExpExc

視頻圖像應該在視頻元素的邊界內用letterbox填充以保持其長寬比;視頻元素本身應該是相當大的，不過你喜歡，而且這通常起作用。我終於開始工作了，但原因讓我感到失望。請參閱http://jsfiddle.net/gliese1337/Djbvj/20/上的小提琴。如果您將視頻位置設置爲「絕對」，則可以使用。如果你從CSS中刪除該行，它的行爲莫名其妙。 –

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

標記示例：

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

樣式表：

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

來源

2015-11-13 15:24:49

這正是我第一次做的。這是顯而易見的事情，應該工作。但它*並不*（或者至少在3年前;這可能不再是這種情況，後來幾種瀏覽器版本）。正如我在問題中所說：「如果包含div的尺寸低於視頻圖像固有的videoWidth或videoHeight，那麼它開始表現得好像CSS高度/寬度屬性指的是視頻圖像固有尺寸的百分比，而不是容器div ！」這是我需要解決的問題。 –

我認爲底線是瀏覽器始終保留視頻的寬高比。 – mtyson

用戶代理是否保留寬高比與問題無關 - 即使保留長寬比，在計算最大高度或寬度（取決於哪個約束更適用）時，它在數學上和其他方面都是微不足道的，並計算其他尺寸以便縱橫比是正確的。例如，您可以在4：3顯示器上觀看letterboxed電影，反之亦然，而在現代寬屏電視機上觀看4：3內容。你會得到黑條。有了'video'，否則這可以通過'background-color'屬性來實現。 – amn

我深知這是一個老問題，但我一直在用CSS實現佈局掙扎，其中一個視頻是自動調整大小以適應某些框，通常在父元素內。

僅使用帶有靜態定位的width和height僅適用於父子拓撲的某些配置，並且還取決於拓撲樣式。即使你得到了一些元素來正確計算它的邊界，一旦你將一個播放視頻元素放入其中，它將允許父母允許的框，儘管這是你期望的最不明智的行爲。

拋出一些fieldset元素，你在CSS和瀏覽器特性的兔子洞裏。

我發現的是，使用position: absolute將視頻元素從其定位上下文中移出是最容易的。這並不意味着它不會在視覺上表現良好 - 使用width: 100%和height: 100%可以有效地使其正確地約束自己，否則它應該（但不會）。然後，您需要將position: relative添加到視頻元素的相應祖先元素，否則視頻將絕對與文檔根相關，這很可能不是您想要的。

省略left和right工作原因是絕對定位不重置位置，只是切換計算方法。您可以選擇將這兩個屬性設置爲零，然後將視頻與偏移父左上角對齊。 max-width和max-height是不必要的 - 我只是在很多情況下看到這些被人拋出來的情況，人們爲了約束他們的視頻元素而掙扎 - 不要打擾。

您可以爲視頻元素或其偏移父級指定背景顏色。這樣你就會得到信箱效應 - 比如視頻邊上的黑條。

來源

2017-07-19 12:58:00 amn

修復HTML5視頻到父元素大小

回答

相關問題