css 图片剪裁居中

列表显示图片的时候，一般设置图片宽度自适应，那么高度就会根据图片本身的宽高比等比缩放，那么问题来了，多张图片的宽高比可能本身并不相同，那么造成图片宽度一样，高度不一样，显示不好看，不协调。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不支持