如何在CSS中调整背景图大小无变形适配div容器

将我拥有不同宽高尺寸的背景图片（800x1200、600x800），希望在不产生变形的前提下将图片调整至完整尺寸适配div容器。我尝试了以下CSS代码，但图片无法占满div的全部宽度，请问该如何实现？

.example1 { border: 2px solid black; padding: 0; background: url(mountain.jpg); background-repeat: no-repeat; background-size: contain; }

咱们先理清你当前代码的问题：你用的background-size: contain，核心逻辑是严格保留图片原比例，让图片完整塞进容器内——也就是说，图片会自动缩放，直到某一边刚好贴合容器边缘，另一边就会自然留白。比如你的竖版图（800x1200）放在宽大于高的div里时，contain会优先让图片高度填满容器，宽度自然就小于容器宽度，这就是你看到“无法占满全部宽度”的原因。

下面给你两种针对性解决方案，按需选择：

方案1：允许裁剪图片，优先占满容器 #

如果可以接受图片的上下/左右部分被裁剪（但绝对不会变形），把background-size: contain改成background-size: cover就行。这个属性会让图片自动缩放至完全覆盖整个容器，虽然可能裁掉部分内容，但能保证容器被填满，图片比例也完全不变。

优化后的代码：

.example1 {
  border: 2px solid black;
  padding: 0;
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; /* 可选：让裁剪后的图片居中显示，提升视觉效果 */
}

方案2：必须完整显示图片，同时占满容器宽度 #

这种情况的核心是让容器的宽高比和图片完全一致，这样contain就能让图片刚好填满容器（比例匹配就不会留白）。我们可以用padding-top的百分比技巧实现自适应比例的容器，不管容器宽度怎么变，高度都会按图片比例自动调整：

.example1 {
  border: 2px solid black;
  padding: 0;
  width: 100%; /* 可以改成你需要的固定宽度，比如600px */
  position: relative;
}

/* 用伪元素构建自适应高度的容器 */
.example1::before {
  content: '';
  display: block;
  /* 计算图片的高宽比：高度/宽度*100%，比如800x1200就是1200/800*100%=150%，600x800就是800/600≈133.33% */
  padding-top: 150%;
}

/* 背景图容器铺满整个自适应容器 */
.example1 {
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

只需要根据不同图片的宽高比调整padding-top的百分比，就能让图片完整显示且刚好填满div，完全不会变形或留白。

内容的提问来源于stack exchange，提问作者user386430