使用CSS让矩形图片只展示中间正方形区域且图片不变形（div/img两种标签）

效果示意

CSS实现

使用div标签时，设置背景图，并设置background-size: cover

<!-- 标签 --><div class="square"></div><!-- 样式 --><style>.square{width: 80px;height: 80px;background: url("背景图地址") no-repeat center center;background-size: cover;}</style>

使用img标签时，设置src属性， 并设置object-fit: cover

<!-- 标签 --><img class="square" src="背景图地址"></div><!-- 样式 --><style>.square{width: 80px;height: 80px;object-fit: cover;}</style>