一行css代码解决图片统一大小后的拉伸问题(object-fit)

2024-07-11 08:25:21

字体：大中小

来源：转载

供稿：网友

一、先来个实战

1. 测试案例

需求: 要求表情库里所有表情包大小都固定

实际效果: 由于图片原始大小都不一样,强行设定大小值会导致拉伸,如果不设定大小则参差不齐。例如:

//html<body> <img src="1.jpg" /> <img src="2.jpg" /> <img src="3.jpg" /> ....</body>//cssimg{ width: 80px; height: 80px; margin-right: 10px;}

2. 解决方法

大多数都是利用background-size: cover 来避免对图片造成的压缩或者拉伸。

小巧而强大的object-fit

object-fit似乎是被人忽视的一个CSS3属性。因为存在兼容性,所以没有background-size好用,但是由于某种情况,你不得不用img标签来引入图片,这时候用object-fit是很好的选择。

CSS3 background-size出现的比较早，大家应该知道其支持的一些值，除了数值之外，其还支持几个关键字，例如：cover, contain等。

object-fit也是类似的，但还是有些差异，具体有5个值：

.fill { object-fit: fill; }
.contain { object-fit: contain; }
.cover { object-fit: cover; }
.none { object-fit: none; }
.scale-down { object-fit: scale-down; }

fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。

contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。

cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。

none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。

scale-down: 缩放，以适应显示区域，当显示区域小于图片大小时，图片被缩放；当显示区域大于图片大小时表现为图片正常的大小，效果和none一致

我们给上图所有img都统一加上object-fit: cover;属性,看看效果:

完美解决！真的很方便,只需要一行css

我们具体学一下object-fit

属性	描述
fill	默认值。整个对象将完全填充此框。如果对象的高宽比不匹配其框的宽高比，那么该对象将被拉伸以适应。
contain	整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。
cover	被替换的内容大小保持其宽高比，同时填充元素的整个内容框。如果对象的宽高比与盒子的宽高比不匹配，该对象将被剪裁以适应。
none	内容尺寸不会被改变。
scale-down	内容的尺寸就像是指定了none或contain，默认应用尺寸最小的值