◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
CSS 图片属性指南：background-size 和 object-fit
ID:14048 / 打印
CSS 图片属性指南：background-size 和 object-fit
在前端开发中，使用图片是非常常见的。为了让图片在网页中显示得更好，CSS 提供了多种属性来调整和控制图片的大小和布局。其中，background-size 和 object-fit 是两个常用的属性，它们可以根据需要调整图片的大小和适应方式。本文将详细介绍这两个属性，并提供具体的代码示例。
一、background-size 属性
background-size 属性用于调整背景图片的大小。它可以使用以下几个值：
立即学习“前端免费学习笔记（深入）”；
- cover：将背景图像等比缩放并完全覆盖容器，可能会出现部分图像被裁剪的情况。
.background { background-image: url('img.jpg'); background-size: cover; }- contain：将背景图像等比缩放并尽量完整地显示在容器内。
.background { background-image: url('img.jpg'); background-size: contain; }- length：指定背景图像的宽度和高度。
.background { background-image: url('img.jpg'); background-size: 200px 300px; }- percentage：指定背景图像的宽度和高度相对于容器的百分比。
.background { background-image: url('img.jpg'); background-size: 50% 75%; }二、object-fit 属性
object-fit 属性用于调整标签中的图片的大小和适应方式。它可以使用以下几个值：
- fill：将图片拉伸以充满
元素，可能会导致图片失真。
img { object-fit: fill; }- contain：将图片等比缩放并尽量完整地显示在
元素中。
img { object-fit: contain; }- cover：将图片等比缩放并完全覆盖
元素，可能会出现部分图像被裁剪的情况。
img { object-fit: cover; }- none：不改变图片的大小和适应方式，默认值。
img { object-fit: none; }- scale-down：根据图片的原始尺寸和容器的大小决定图片的大小和适应方式。
img { object-fit: scale-down; }三、示例代码
为了更好地理解和应用 background-size 和 object-fit 属性，以下是具体的代码示例：
<!DOCTYPE html> <html> <head> <style> .background { width: 500px; height: 300px; background-image: url('image.jpg'); background-size: cover; } img { width: 200px; height: 150px; object-fit: cover; } </style> </head> <body> <div class="background"></div> <img src="image.jpg" alt="图片"> </body> </html>以上代码中，.background 类使用 background-size: cover; 属性将背景图像等比缩放并完全覆盖容器。而 标签应用 object-fit: cover; 属性将图片等比缩放并完全覆盖
元素。
通过调整相关属性的值，你可以对图片的大小和适应方式进行自定义，使其完美地融入你的网页布局。
总结：
通过使用 background-size 和 object-fit 属性，我们可以很方便地调整和控制图片的大小和适应方式。无论是作为背景图像还是作为元素中的图片，我们都能轻松地实现自定义的图像展示效果。希望这篇文章能帮助你更好地理解和应用这两个属性。
