讓video在div中鋪滿全屏

需求

不廢話，直接上需求。需要實作在一個5500*500的div中，讓div中的video自動鋪滿，顯示全屏。如圖1：

坑爹

當你嘗試這麼寫的話：

.video {
        width: px;
        height: px;
        background-color: #bbc13d;
        margin: px auto;
    }

.video video {
        width: %;
        height: %;
        display: block;
    }
           

貌似老闆或者客戶會不滿意，我明明讓你鋪滿全屏，你為啥給我來個居中？

一個屬性幫你搞定

來，試試把這個屬性

object-fit: fill;

加到你可愛的

video

标簽上去，你就能得到全屏的video了。不要用什麼js計算div寬高了，是不是刺激？

如圖2：

相容性

圖3：

噗~，萬惡的ie！不過如果不怎麼考慮ie的話，可以嘗試一下使用這個簡單但又強大的屬性哦~