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

css有一個object-fit屬性，用來指定替換元素的內容應該如何適應到其使用的高度和寬度確定的框

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:container

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

object-fit:cover

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

object-fit:none

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

object-fit:scale-down

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

object-fit​​​​​​​全域性屬性 
object-fit: inherit; 
object-fit: initial; 
object-fit: unset;