object-fit 解決圖片指定大小被壓縮問題


object-fit 解決圖片指定大小被壓縮問題

第一次遇到這個屬性,是在給video 寫 poster的時候,選取的作為poster的img的尺寸有點小,導致video播放器兩邊有留白。在控制台查看video默認樣式的時候看到了這個屬性。

chrome中默認是object-fit:contain,當poster尺寸過小的時候就會如下問題:

enter image description here

注意播放器兩邊的留白,顯然 這不是我們想要的樣式,如果能完全覆蓋就更好了。嘗試按照background-size屬性的寫法嘗試了改寫為cover。效果如下:

enter image description here

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效果可以在這里查看

下面是在項目中應用的場景:

enter image description here
這是我在淘寶頭條的文章list上截取的圖片。可以看出它的文章配圖都是采用div.pic通過內聯的background-image來顯示配圖的。用意 很明顯,當從文章提取的圖片和文章list的展示塊尺寸比例不一致的時候,背景圖可通過指定 background-size:cover 來避免對圖片造成的壓縮或者拉伸。

下圖是我用object-fit:fit 對結構的一次改寫:
enter image description here

這樣頁面的結構更為清晰,語義化更好,而且對前端綁定數據更為方便。
(這里我們不討論更深層次的img和背景圖的優劣勢問題)

另外還有一個object-position和background-position性質差不多,我可以指定顯示的位置,來完成上面我說的美中不足的問題~

我們來看下兼容性的問題,可以看出雖然是個草案屬性,但是瀏覽器在移動端支持度還是挺好的。在移動端開發還是可以應用這個屬性的。

enter image description here


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM