css解决图片固定大小后拉伸的问题

最新推荐文章于 2025-07-20 10:07:34 发布

原创最新推荐文章于 2025-07-20 10:07:34 发布 · 3.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

本文介绍了如何利用CSS的object-fit属性来避免图片在固定尺寸容器中被拉伸的情况。object-fit属性提供了五种不同的模式：fill、contain、cover、none和scale-down。fill会填充整个容器并可能拉伸图片；contain确保图片保持原比例并填充容器，可能会有黑边；cover则在保持比例的同时填满容器，超出部分会被裁剪；none保持图片原始尺寸，超出容器的部分会被遮挡；scale-down则在contain和none之间选择使图片尺寸最小的模式。

css解决图片固定大小后拉伸的问题

<div>
	<img src="/img/1.jpg" class="img" />
</div>
<style>
.img{
	object-fit:cover;
}
</style>

object-fit属性

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

注释：
1、fill: 默认值,和未设置一样。会将图片压缩拉伸
2、contain: 当宽/高的值达到父容器规定的最小宽/高时,则对应的另一个值会按照原始宽高比进行生成。例如上面,图片的高度达到父容器高度后,宽度按照比例生成,导致左右留白
3、cover: 和contain不一样,cover是以最大值为规定的。例如上图,图片的高度(较小值)首先达到父容器高度后,而宽度并未达到父容器的宽度,图片会继续’生长’,直到宽度达到和父容器宽度一致。而等比伸缩的高度会溢出,溢出部分裁剪
4、none: 顾名思义宽高对图片不起作用,即使设置了固定的宽高,图片仍然以原始大小展现,但是超出设置的值会被遮挡
5、scale-down: 以contain或none图片最小尺寸为标准.