当前位置：首页 > news >正文

css图片属性，图片自适应

news 2025/8/13 3:22:56

CSS 图片属性指南：background-size 和 object-fit
在前端开发中，使用图片是非常常见的。为了让图片在网页中显示得更好，CSS 提供了多种属性来调整和控制图片的大小和布局。其中，background-size 和 object-fit 是两个常用的属性，它们可以根据需要调整图片的大小和适应方式。
一、background-size 属性：
background-size 属性用于调整背景图片的大小。它可以使用以下几个值：
1.cover：将背景图像等比缩放并完全覆盖容器，可能会出现部分图像被裁剪的情况。

.background{background:url('../../assets/1.jpg');background-size:cover;
}

2.contain：将背景图像等比缩放并尽量完整地显示在容器内

.background{background:url('../../assets/1.jpg');background-size:contain;
}

3.length：指定背景图像的宽度和高度

.background{background:url('../../assets/1.jpg');background-size:200px 200px;
}

4.percentage：指定背景图像的宽度和高度相对于容器的百分比

.background{background:url('../../assets/1.jpg');background-size:50% 70%;
}

二、object-fit 属性

object-fit 属性用于调整标签中的图片的大小和适应方式。它可以使用以下几个值：
1.fill：将图片拉伸以充满元素，可能会导致图片失真。

.img{width:100px;height:100px;object-fit:fill;
}

2.contain：将图片等比缩放并尽量完整地显示在元素中。

.img{width:100px;height:100px;object-fit:contain;
}

3.cover：将图片等比缩放并完全覆盖元素，可能会出现部分图像被裁剪的情况。

.img{width:100px;height:100px;object-fit:cover;
}

4.scale-down：根据图片的原始尺寸和容器的大小决定图片的大小和适应方式。

.img{width:100px;height:100px;object-fit:scale-down;
}

如下代码实现的效果可看出，第三章图片更清晰

 <div style="width:100px;height:100px"><img style="display:inline-block;width:100%;height:100%" src="../../assets/1.jpg" alt=""></div><div style="width:100px;height:100px"><img style="display:inline-block;width:100%;height:100%" src="../../assets/2.jpg" alt=""></div><div style="width:100px;height:100px"><img style="object-fit:cover;width:100px;height:100px" src="../../assets/1.jpg" alt=""></div></div>

在这里插入图片描述
通过使用 background-size 或 object-fit 属性，我们可以很方便地调整和控制图片的大小和适应方式。