如何根据 div 的大小缩放 bg 图像 - CSS

在 CSS 中，可以使用 background-size 属性来控制背景图片的大小。根据 div 元素的大小自动缩放背景图片可以通过设置 background-size 属性的值为 cover 或 contain。

1. 使用 background-size: cover

将 background-size 设置为 cover 会自动调整背景图片的大小，使其覆盖整个 div 元素，并保持图片的比例。如果图片的宽高比与 div 元素的宽高比不匹配，可能会有一部分图片被裁剪掉。

div {
  background-image: url('path/to/image.jpg');
  background-size: cover;
}

2. 使用 background-size: contain

将 background-size 设置为 contain 会自动调整背景图片的大小，使其完整地显示在 div 元素内部，并保持图片的比例。如果图片的宽高比与 div 元素的宽高比不匹配，可能会有一部分 div 背景可见。

div {
  background-image: url('path/to/image.jpg');
  background-size: contain;
}

3. 使用百分比值

可以根据 div 元素的大小，使用百分比值来设置背景图片的大小。例如，将 background-size 设置为 100% auto 会使图片的宽度与 div 元素的宽度相等，并保持图片的高度与宽度比例。

div {
  background-image: url('path/to/image.jpg');
  background-size: 100% auto;
}

4. 使用像素值

可以直接使用像素值来设置背景图片的大小。例如，将 background-size 设置为 200px 300px 会固定图片的宽度为 200 像素，高度为 300 像素。

div {
  background-image: url('path/to/image.jpg');
  background-size: 200px 300px;
}

以上是使用 CSS 控制背景图片在 div 元素中的缩放方法。根据实际需求，选择适合的方式来显示背景图片。