讓video在div中鋪滿全屏
阿新 • • 發佈:2019-01-09
需求
不廢話,直接上需求。需要實現在一個5500*500的div中,讓div中的video自動鋪滿,顯示全屏。如圖1:
坑爹
當你嘗試這麼寫的話:
.video {
width: 500px;
height: 500px;
background-color: #bbc13d;
margin: 50px auto;
}
.video video {
width: 100%;
height: 100%;
display: block;
}
貌似老闆或者客戶會不滿意,我明明讓你鋪滿全屏,你為啥給我來個居中?
一個屬性幫你搞定
來,試試把這個屬性object-fit: fill;
加到你可愛的video
標籤上去,你就能得到全屏的video了。不要用什麼js計算div寬高了,是不是刺激?
如圖2:
相容性
圖3:
噗~,萬惡的ie!不過如果不怎麼考慮ie的話,可以嘗試一下使用這個簡單但又強大的屬性哦~