css图片剪裁居中

最近工作遇到一个新的css属性object-fit

工作使用场景：

   列表显示图片的时候，一般设置图片宽度自适应，那么高度就会根据图片本身的宽高比等比缩放，那么问题来了，多张图片的宽高比可能本身并不相同，那么造成图片宽度一样，高度不一样，显示不好看，不协调。如下图，图1和图2.怎么才能实现图片居中剪切，避免图片变形呢，css属性object-fit就可以实现

实现代码：

注意：只是简单的用pc做了个demo，如果移动端都是话，单位使用rem。

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

object-fit属性详解

object-fit:CSS 属性指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框。

1. object-fit:fill  被替换的内容大小可以填充元素的内容框，整个对象将完全填充此框，如果对象的宽高比不匹配其框的宽高比，你们对象会被拉伸。
2. object-fit:contain 被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比，整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加
3. object-fit:cover  被替换的内容大小保持其宽高比，同事填充元素的整个内容框，如果对象的宽高比与盒子的宽高比不匹配，改对象将被裁剪以适应。
4. object-fit:none  被替换的内容尺寸不会被改变
5. object-fit:scale-down  内容的尺寸就像是指定了none或contain，取决于哪一个将导致更小的对象尺寸。

   
   

兼容性支持：

pc:基本支持，IE不支持。
mobile:基本支持，安卓4.4.4 ie不支持