object-fit 解決圖片指定大小被壓縮問(wèn)題
第一次遇到這個(gè)屬性佛南，是在給video 寫(xiě) poster的時(shí)候,選取的作為poster的img的尺寸有點(diǎn)小蔬咬，導(dǎo)致video播放器兩邊有留白。在控制臺(tái)查看video默認(rèn)樣式的時(shí)候看到了這個(gè)屬性绞铃。
chrome中默認(rèn)是object-fit:contain，當(dāng)poster尺寸過(guò)小的時(shí)候就會(huì)如下問(wèn)題：
注意播放器兩邊的留白，顯然 這不是我們想要的樣式显蝌，如果能完全覆蓋就更好了。嘗試按照background-size屬性的寫(xiě)法嘗試了改寫(xiě)為cover订咸。效果如下：
perfect曼尊，可是還有點(diǎn)美中不足。脏嚷。骆撇。不過(guò)我們還是先來(lái)了解下object-fit這個(gè)屬性。
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這個(gè)屬性指定可替換元素在已被設(shè)定好的寬高中展示的方式神郊。
也就是說(shuō)以前我們給img指定寬高，會(huì)影響圖像本身的比例趾唱，導(dǎo)致被壓縮拉伸等∮咳椋現(xiàn)在我們可以通過(guò)object-fit來(lái)控制這個(gè)圖像在指定寬高中如何顯示的問(wèn)題（或者可以這樣理解，我們指定圖片的寬高甜癞，就相當(dāng)于是一個(gè)指定大小的div夕晓，我們調(diào)整圖片的object-fit屬性，就相當(dāng)于給這個(gè)div調(diào)整背景的background-size屬性）
一共有五個(gè)值fill | contain | cover | none | scale-down效果可以在這里查看
下面是在項(xiàng)目中應(yīng)用的場(chǎng)景：
這是我在淘寶頭條的文章list上截取的圖片悠咱≌袅荆可以看出它的文章配圖都是采用div.pic通過(guò)內(nèi)聯(lián)的background-image來(lái)顯示配圖的。用意 很明顯析既，當(dāng)從文章提取的圖片和文章list的展示塊尺寸比例不一致的時(shí)候吁朦，背景圖可通過(guò)指定background-size:cover來(lái)避免對(duì)圖片造成的壓縮或者拉伸。
下圖是我用object-fit:fit對(duì)結(jié)構(gòu)的一次改寫(xiě)：
這樣頁(yè)面的結(jié)構(gòu)更為清晰渡贾，語(yǔ)義化更好逗宜，而且對(duì)前端綁定數(shù)據(jù)更為方便。
（這里我們不討論更深層次的img和背景圖的優(yōu)劣勢(shì)問(wèn)題）
另外還有一個(gè)object-position和background-position性質(zhì)差不多，我可以指定顯示的位置纺讲，來(lái)完成上面我說(shuō)的美中不足的問(wèn)題~
我們來(lái)看下兼容性的問(wèn)題擂仍，可以看出雖然是個(gè)草案屬性，但是瀏覽器在移動(dòng)端支持度還是挺好的熬甚。在移動(dòng)端開(kāi)發(fā)還是可以應(yīng)用這個(gè)屬性的逢渔。
