威言威语
我愿像茶,苦涩留心,清香予人。
威言威语
当前位置: 首页 > 设计 > 正文

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

经常会有一些需求,不同宽高比的图片并排展示,为了美观,都展示成正方形,而且截取图片的最中间部分展示,这样图片看上去不变形。根据图片载入的方式不同,一般可以有2种方式来实现,一种是设置为背景图,另一种是用img标签。
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;

预览请点

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

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

发表评论

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

gravatar

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