在CSS中,我們可以使用object-fit
屬性來(lái)設(shè)置視頻的播放樣式。object-fit
屬性可以指定元素應(yīng)如何適應(yīng)其容器,特別是在高度和寬度不一致的情況下。
如果你想讓一個(gè)視頻在容器中完全填充,你可以這樣寫:
video { width: 100%; height: 100%; object-fit: cover; }
這段代碼會(huì)將視頻元素設(shè)置為填充整個(gè)容器,同時(shí)保持視頻的縱橫比不變。object-fit
屬性的cover
值表示視頻將始終覆蓋整個(gè)容器,無(wú)論容器的尺寸如何變化。
如果你想讓視頻在容器中保持原始比例并居中顯示,你可以這樣寫:
video { width: 100%; height: 100%; object-fit: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
這段代碼會(huì)將視頻元素設(shè)置為在容器中保持原始比例并居中顯示。object-fit
屬性的contain
值表示視頻將始終保持在容器內(nèi),同時(shí)保持視頻的縱橫比不變。position
和transform
屬性用于將視頻元素居中顯示。
就是在CSS中設(shè)置視頻播放樣式的兩種方法,你可以根據(jù)自己的需求選擇適合的樣式。