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

怎么才能实现图片居中剪切，避免图片变形呢，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不支持

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/3058