css控制长方形图片只展示中间正方形区域，且不变形

经常会有一些需求，不同宽高比的图片并排展示，为了美观，都展示成正方形，而且截取图片的最中间部分展示，这样图片看上去不变形。根据图片载入的方式不同，一般可以有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;

预览请点