object-fit 解決圖片指定大小被壓縮問題
第一次遇到這個屬性,是在給video 寫 poster的時候,選取的作為poster的img的尺寸有點小,導致video播放器兩邊有留白。在控制台查看video默認樣式的時候看到了這個屬性。
chrome中默認是object-fit:contain
,當poster尺寸過小的時候就會如下問題:
注意播放器兩邊的留白,顯然 這不是我們想要的樣式,如果能完全覆蓋就更好了。嘗試按照background-size屬性的寫法嘗試了改寫為cover。效果如下:
perfect,可是還有點美中不足。。。不過我們還是先來了解下object-fit這個屬性。
The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width. —MDN
MDN上給的解釋,object-fit這個屬性指定 可替換元素 在已被設定好的寬高中展示的方式。
也就是說以前我們給img指定寬高,會影響圖像本身的比例,導致被壓縮拉伸等。現在我們可以通過object-fit來控制這個圖像在指定寬高中如何顯示的問題(或者可以這樣理解,我們指定圖片的寬高,就相當於是一個指定大小的div,我們調整圖片的object-fit屬性,就相當於給這個div調整背景的background-size屬性)
一共有五個值 fill | contain | cover | none | scale-down
效果可以在這里查看
下面是在項目中應用的場景:
這是我在淘寶頭條的文章list上截取的圖片。可以看出它的文章配圖都是采用div.pic通過內聯的background-image來顯示配圖的。用意 很明顯,當從文章提取的圖片和文章list的展示塊尺寸比例不一致的時候,背景圖可通過指定 background-size:cover
來避免對圖片造成的壓縮或者拉伸。
下圖是我用object-fit:fit
對結構的一次改寫:
這樣頁面的結構更為清晰,語義化更好,而且對前端綁定數據更為方便。
(這里我們不討論更深層次的img和背景圖的優劣勢問題)
另外還有一個object-position和background-position性質差不多,我可以指定顯示的位置,來完成上面我說的美中不足的問題~
我們來看下兼容性的問題,可以看出雖然是個草案屬性,但是瀏覽器在移動端支持度還是挺好的。在移動端開發還是可以應用這個屬性的。