Html5的video標籤自動填充滿父div的大小

2022-09-11 00:21:27 字數 729 閱讀 2757

想要video能自動填充慢父div的大小,只要給video標籤加上style="width:100%; height:100%; object-fit:fill"即可。

object-fit語法

object-fit屬性的語法非常的簡單:

object-fit:fill | contain | cover | none | scale-down

object-fit取值說明

object-fit主要適合於替換元素,比如:、、

、、、和等。其預設值為fill。object-fill取值的說明如下:

fill:此值為boject-fit的預設值,替換內容的大小被設定為填充元素的內容框,也就是說,元素的內容擴大到完全填充容器的外形尺寸,即使這打破其內在的寬高比。

contain:替換元素內容大小保持長寬比例填充元素內容容器,其具體物件大小被解析為乙個包含元素的寬度和高度。也就是說,如果你在替換元素上設定乙個明確的高度和寬度,此值將導致內容大小,完全在固定的比例顯示,但仍在元素尺寸內顯示。

cover:替換元素內容大小保持長寬比例填充元素內容容器,其具體物件大小被解析為覆蓋整個元素的寬度和高度。也就是說,替換元素內容大小保持長寬比,但改變寬度和高度,以便完全覆蓋內容元素。

none:替換元素內容不調整大小以適應內部元素的容器,內容完全忽略設定在元素上的任何高度和權重,並且仍在元素尺寸內顯示。

scale-down:當內容大小設定了non或contain,將導致具體物件變得更小。

學習html5的video標籤

慣例 我是溫浩然 您的瀏覽器不支援 video 標籤。親自試一試 iefirefox chrome safari opera internet explorer 9 firefox,opera,chrome 以及 safari 支援 標籤。注釋 internet explorer 8 以及更早的版本...

html5標籤video 筆記一

摘要 網上的教程其實也不少了 w3cschool裡面的最為簡單而詳細,那麼這幾介紹的是一些更為直接的應用。本文目錄 使用標籤 加上一些必要引數 第一步 使用標籤 使用的方法很簡單,就是一句 video video video controls src video video controls aut...

html5標籤video 筆記二

摘要 獲取影片總時長 音量的獲取和設定 第一 獲取影片總時長 videoid myvideo controls preload auto width 300 height 165 poster src video 設定乙個id後,那麼就可以開始操作了,要獲取總時長,要用到video的乙個事件 loa...