以下是几种实现div背景图片自适应的方法及代码示例：

一、使用 CSS 的background-size属性

1. cover值：

• 此值会使背景图片等比缩放以完全覆盖背景区，可能会导致背景图片部分区域不可见。

• 代码示例：

div {
  width: 300px;
  height: 200px;
  background-image: url('your-image.jpg');
  background-size: cover;}

2. contain值：

• 使背景图片等比缩放以完全装入背景区，可能会在背景区出现空白区域。

• 代码示例：

div {
  width: 300px;
  height: 200px;
  background-image: url('your-image.jpg');
  background-size: contain;}

二、使用 CSS3 的background-size百分比值

1. 以百分比设置背景图片大小：

• 可以设置为相对于元素的百分比大小，例如100% 100%表示背景图片会填充整个div元素。

• 代码示例：

div {
  width: 300px;
  height: 200px;
  background-image: url('your-image.jpg');
  background-size: 100% 100%;}

三、使用vw和vh单位

1. 根据视口宽度和高度设置背景图片大小：

• vw代表视口宽度的 1%，vh代表视口高度的 1%。可以根据需要调整背景图片的大小比例。

• 代码示例：

div {
  width: 300px;
  height: 200px;
  background-image: url('your-image.jpg');
  background-size: 100vw 100vh;}

四、使用 CSS3 的object-fit属性（适用于设置了background-image为url()且同时设置了background-size为cover或contain后仍无法满足需求的情况）

1. object-fit属性的使用：

• 可以将div元素转换为一个img元素的效果，通过设置object-fit属性来控制背景图片的显示方式。

• 代码示例：

div {
  width: 300px;
  height: 200px;
  background-image: url('your-image.jpg');
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-repeat: no-repeat;
  position: relative;}div::before {
  content: "";
  display: block;
  padding-top: 100%; /* 保持宽高比为 1:1 */}div::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: inherit;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  object-fit: cover;}