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性質差不多，我可以指定顯示的位置，來完成上面我說的美中不足的問題~
我們來看下兼容性的問題，可以看出雖然是個草案屬性，但是瀏覽器在移動端支持度還是挺好的。在移動端開發還是可以應用這個屬性的。
