威言威语
我愿像茶一样,把苦涩留在心里,敬发出来的都是清香!
威言威语
当前位置: 首页 > 设计 > 正文

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

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

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

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

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

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

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

预览请点

本文固定链接: https://www.weisay.com/blog/css-controls-middle-square-area.html | 威言威语

您可能还会对这些文章感兴趣!

css控制长方形图片只展示中间正方形区域,且不变形:等您坐沙发呢!

发表评论

avatar

电子邮件地址不会被公开。 必填项已用 * 标注

question razz sad smile redface biggrin surprised eek confused cool lol mad rolleyes wink neutral cry

快捷键:Ctrl+Enter