经常会有一些需求，不同宽高比的图片并排展示，为了美观，都展示成正方形，而且截取图片的最中间部分展示，这样图片看上去不变形。根据图片载入的方式不同，一般可以有2种方式来实现，一种是设置为背景图，另一种是用img标签。一、背景图
通过设置背景图的方式来实现我们的需求，主要通过background-size属性来设置我们的背景图缩放比例。
简单介绍一下background-size： background-size: contain; 自动调整缩放比例，保证图片始终 完整 的显示在背景区域，不裁剪图片 background-size: cover; 对图片进行等比缩放，如有溢出部分则会被裁剪隐藏具体CSS如下：
background-image: url(1.jpg);background-repeat: no-repeat;background-position: center;background-size: cover;当然也可以将上面的整合为一行:
background: url(1.jpg) center/cover no-repeat;二、img标签用img标签直接展示图片的，主要通过css的object-fit属性来实现。
object-fit: cover;width: 200px; height: 200px;预览请点
VIEW DEMO