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

實現(xiàn)代碼：

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

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

?

?

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。