css 图片缩放平铺

CSS中控制图片缩放和平铺的方法主要依赖于几个CSS属性，包括`background-size`, `background-repeat`, 和 `object-fit`。下面是每个属性的简单介绍：

1. `background-size`: 这个属性可以用来调整背景图片的尺寸，使其覆盖整个元素区域。它可以指定为具体的尺寸值（如`100px 200px`），也可以使用百分比（相对于元素的尺寸）或者`cover`（保持图片的宽高比，缩放图片以完全覆盖元素区域，可能会裁剪图片边缘）和`contain`（保持图片的宽高比，缩放图片以完全适应元素区域，可能会在图片周围留出空白）。

2. `background-repeat`: 用来控制背景图像是否重复及如何重复。可以设置的值有：
- `repeat`：在垂直和水平方向上平铺。
- `no-repeat`：不平铺。
- `repeat-x`：仅在水平方向上平铺。
- `repeat-y`：仅在垂直方向上平铺。

3. `object-fit`: 这个属性用于指定如何调整`<img>`或`<video>`元素的宽高比以适应其容器的尺寸。可以设置的值有：
- `fill`：拉伸图片填充整个元素区域，不保持原始宽高比。
- `contain`：缩放图片以使其完全适合元素区域，保持图片的原始宽高比，图片会居中显示，可能会留出空白。
- `cover`：缩放图片以完全覆盖元素区域，保持图片的原始宽高比，可能会裁剪图片边缘。
- `none`：图片保持其原始尺寸，不进行缩放。
- `scale-down`：图片缩放至比原始尺寸更小的一方（宽度或高度），保持宽高比。

结合使用这些属性，你可以灵活控制图片的缩放和平铺行为，以达到预期的视觉效果。