【CSS】图片居中剪裁，避免图片变形

不管是在pc端还是在移动端，页面都必不可少的会出现很多图片，正常情况下，我们让图片100%自适应显示的话，如图下：

在这里可以看到，图片有大有小，但是有时候我们需要图片显示的大小是一样，而且不能变形，

那么我们需要给图片加入以下样式代码：【主要是object-fit: cover;属性】

.panorama li img{
    display: block;
    width:100%;
    height:120px;
    object-fit: cover;
}

加入后，显示如下，是我们想要的结果：

 

个人体会：其实这个属性类似与小程序中mode='aspectFill'属性：

<image src="http://cdn.test.mainaer.com/uploads/20160720/1640028decfe.jpg"  mode='aspectFill'/>

该属性意义：保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

 

 

附：启蒙链接：https://blog.csdn.net/baidu_41205301/article/details/78764775