最近工作遇到一個新的css屬性object-fit

工作使用場景：

   列表顯示圖片的時候，一般設定圖片寬度自適應，那麼高度就會根據圖片本身的寬高比等比縮放，那麼問題來了，多張圖片的寬高比可能本身並不相同，那麼造成圖片寬度一樣，高度不一樣，顯示不好看，不協調。如下圖，圖1和圖2.怎麼才能實現圖片居中剪下，避免圖片變形呢，css屬性object-fit就可以實現

實現程式碼：

注意：只是簡單的用pc做了個demo，如果移動端都是話，單位使用rem。

img{
display:block;
width:100%;
heigth:300px;
object-fit:cover
}

object-fit屬性詳解

object-fit:CSS 屬性指定替換元素的內容應該如何適應到其使用的高度和寬度確定的框。

1. object-fit:fill  被替換的內容大小可以填充元素的內容框，整個物件將完全填充此框，如果物件的寬高比不匹配其框的寬高比，你們物件會被拉伸。
2. object-fit:contain 被替換的內容將被縮放，以在填充元素的內容框時保持其寬高比，整個物件在填充盒子的同時保留其長寬比，因此如果寬高比與框的寬高比不匹配，該物件將被新增
3. object-fit:cover  被替換的內容大小保持其寬高比，同事填充元素的整個內容框，如果物件的寬高比與盒子的寬高比不匹配，改物件將被裁剪以適應。
4. object-fit:none  被替換的內容尺寸不會被改變
5. object-fit:scale-down  內容的尺寸就像是指定了
   none或contain，取決於哪一個將導致更小的物件尺寸。

相容性支援：

pc:基本支援，IE不支援。
mobile:基本支援，安卓4.4.4 ie不支援