列表顯示圖片的時候，一般設置圖片寬度自適應，那么高度就會根據圖片本身的寬高比等比縮放，那么問題來了，多張圖片的寬高比可能本身并不相同，那么造成圖片寬度一樣，高度不一樣，顯示不好看，不協調。css屬性object-fit就可以實現

實現代碼：

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

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

?

?

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

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

兼容性支持：
pc:基本支持，IE不支持。
mobile:基本支持，安卓4.4.4 ie不支持

總結

以上是生活随笔為你收集整理的css 图片剪裁居中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。