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

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

William2009-02-25 22:45设计5,590次阅读抢沙发

经常会有一些需求，不同宽高比的图片并排展示，为了美观，都展示成正方形，而且截取图片的最中间部分展示，这样图片看上去不变形。

可以通过下面css代码实现:

background-image: url(1.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;

当然也可以将上面的整合为一行:

background: url(1.jpg) center/cover no-repeat;

预览请点

VIEW DEMO