引导者

简介

CSS 中的 `background-image` 属性用于为元素设置背景图像。要使背景图像自动适应元素的大小小，可以使用 `background-size` 属性。

多级标题

背景图像自动适应

内容详细说明

要使背景图像自动适应元素的大小小，请使用 `background-size` 属性并将其值设置为 `cover` 或 `contain`：

cover：

使背景图像覆盖整个元素，同时保持图像宽高比。图像将被缩放以填充元素，超出的部分将被裁剪。

contain：

使背景图像包含在元素内，同时保持图像宽高比。图像将被缩放以适应元素，而不被裁剪。

示例

以下示例展示了如何使用 `background-size` 属性使背景图像自动适应元素的大小小：```css /

使背景图像覆盖元素

/ .element {background-image: url("image.jpg");background-size: cover; }/

使背景图像包含在元素内

/ .element {background-image: url("image.jpg");background-size: contain; } ```

其他选项

除了 `cover` 和 `contain` 外，`background-size` 属性还支持其他值：

length：

指定背景图像的宽度和高度。例如，`background-size: 100px 50px;` 将设置背景图像的宽度为 100px，高度为 50px。

percentage：

指定背景图像相对于元素大小的宽度和高度。例如，`background-size: 50% 50%;` 将设置背景图像的宽度和高度都为元素大小的 50%。

auto：

将背景图像的尺寸设置为其固有尺寸（即图像的原始大小）。

注意：

对于 `background-size: cover;`，如果图像宽高比与元素宽高比不同，则图像将被拉伸或压缩。

对于 `background-size: contain;`，如果图像宽高比大于元素宽高比，则图像将被裁剪。

如果没有指定 `background-size`，则背景图像将以其原始尺寸显示。