場景是視頻鋪滿模塊作爲背景展示。常規的樣式 video 標籤很難被拉伸壓縮,所以會導致有很多留黑留白的現象。而 CSS3 中有一個屬性可以完美解決此問題。object-fit
,當設置 下面的屬性時可以完美的佔滿整個模塊而不出現黑色區域。
object-position: center;
object-fit: cover;
但是 object-fit
的兼容性也完美的避開了 IE,任何版本的 IE 瀏覽器都不兼容。Edge 下也不支持。如果不需要處理IE還是非常好的一個解決方法,另外這裏有一個 polyfill,大家可以去嘗試下。
另一種解決方案比較兼容,支持IE,方法如下
width: auto;
height: auto;
min-height: 100%;
min-width: 100%;
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, 0);
親測 IE、Edge 有效,完美兼容