CSS3 object-fit 屬性

做項目經常會遇到圖片列表展示，圖片一般是用戶從后台上傳的，上傳的圖片尺寸千差萬別。如果前端不控制圖片大小，整個排版就會很亂，如果給定長寬，圖片又會變形，用背景圖片來處理有特別麻煩。這個問題一直苦惱了我好久，最近終於找到解決辦法了。

css有一個object-fit屬性，用來指定替換元素的內容應該如何適應到其使用的高度和寬度確定的框，效果類似於微信小程序里image標簽的mode屬性。

1.首先是一個html結構，然后給定圖片高寬然后使用object-fit:cover即可實現圖片不變形而且整體排版也不受影響

<img class="example" src="example.png">

.example{
    width:160px;
    height:90px;
    object-fit:cover;
}

object-fit關鍵屬性：

object-fit：fill

被替換的內容大小可以填充元素的內容框。 整個對象將完全填充此框。 如果對象的高寬比不匹配其框的寬高比，那么該對象將被拉伸以適應。

object-fit:contain

被替換的內容將被縮放，以在填充元素的內容框時保持其寬高比。 整個對象在填充盒子的同時保留其長寬比，因此如果寬高比與框的寬高比不匹配，該對象將被添加“黑邊”。

object-fit:cover

被替換的內容大小保持其寬高比，同時填充元素的整個內容框。 如果對象的寬高比與盒子的寬高比不匹配，該對象將被剪裁以適應。

object-fit:none

被替換的內容尺寸不會被改變。

object-fit:scale-down

內容的尺寸就像是指定了none或contain，取決於哪一個將導致更小的對象尺寸。