用CSS实现背景图片自适应 - 最佳实践

CSS背景图片大小自适应

CSS可以通过background-size属性让背景图片自适应大小。使用该属性时，可以指定背景图片的大小尺寸，例如：background-size: 100% 100%;。这样就可以让背景图片完全填充CSS容器的宽度和高度。

.example {
  background-image: url('example.jpg');
  background-size: 100% 100%;
}

此外，如果想保持原始比例，可以使用contain或cover属性。其中，contain属性表示将背景图像缩放到宽度或高度与背景容器的相对较小内容的边框相等。cover属性表示将背景图像缩放到宽度或高度与背景容器的相对较大内容的边框相等。例如：

.example {
  background-image: url('example.jpg');
  background-size: contain;
}

CSS背景图片高度自适应

若想让背景图片高度自适应，可使用background-size属性以及calc()函数。具体地，在设置background-size时，将高度设置为auto，宽度设置为100%。然后再使用calc函数计算出应该显示的高度。例如：

.example {
  background-image: url('example.jpg');
  background-size: 100% auto;
  height: calc(100vw * 0.5);
}

上述代码中，将高度设置为100vw * 0.5，即表示背景图片高度为100%屏幕宽度的1/2，这样就可以实现背景图片高度自适应。

CSS背景图片宽度自适应

与背景图片高度自适应类似，想要让背景图片宽度自适应也可以使用background-size属性以及calc()函数。在设置background-size时，将宽度设置为auto，高度设置为100%。然后再使用calc函数计算出应该显示的宽度。例如：

.example {
  background-image: url('example.jpg');
  background-size: auto 100%;
  width: calc(100vh * 0.5);
}

上述代码中，将宽度设置为100vh * 0.5，即表示背景图片宽度为100%屏幕高度的1/2，这样就可以实现背景图片宽度自适应。

CSS背景图片全屏铺满自适应

如果想让背景图片全屏铺满，可以将background-size设置为cover。例如：

.example {
  background-image: url('example.jpg');
  background-size: cover;
}

此时，背景图片就会按比例缩放以铺满整个屏幕。

CSS怎么让背景图片自适应

以上所述内容就是怎样让背景图片自适应的一些方法。通过使用background-size属性、calc()函数以及cover属性，可以轻松地实现背景图片自适应。不过，需要注意的是不同的自适应方式可能会存在一定的适用范围，需根据具体情况选择。

CSS让背景图片自适应屏幕大小

如果要让背景图片自适应屏幕大小，可以结合使用vw和vh等相对单位以及calc()函数实现。例如：

.example {
  background-image: url('example.jpg');
  background-size:auto calc(100vh - 100px);
  height: calc(100vw - 100px);
}

该代码中，使用calc()函数计算出应当显示的宽度和高度。上述代码中，高度会比实际高度小100px，而宽度会比实际宽度小100px，这时background-size会自适应计算的高度，保持背景图片比例。

CSS div背景图片自适应

用CSS让div的背景图片自适应同样可以采用background-size属性。首先，需要设置div的高度和宽度，使其成为一个空盒子。然后使用background-size，以100% 100%对背景图片进行自适应。例如：

.example {
  width: 100%;
  height: 100%;
  background-image: url('example.jpg');
  background-size: 100% 100%;
}

CSS背景图片自适应div大小

需要让背景图片自适应div大小时，可以使用CSS3 calc函数将div的高度、宽度以及背景图片的自适应大小进行计算。例如：

.example {
  width: 100%;
  height: 100%;
  background-image: url('example.jpg');
  background-size: calc(100% - 20px) auto;
  width: calc(100% - 20px);
}

该代码中，用calc函数将计算出div的高度与背景图片自适应的模板尺寸。而宽度与背景图片自适应模板的宽度也是通过calc函数计算出来的。