背景图片（background-image）容器适配问题：容器与兄弟元素存在间隙

我正尝试将background-image适配至尺寸依赖视口宽度的容器中，但容器高度与图片自身高度不匹配，导致承载图片的容器和其相邻的绿色文本区块之间出现间隙。

问题图示：

示例代码 #

CSS #

.section--7__photos {
  height: 50vw;
  max-height: 70rem;
  margin: 0 8%;
  background: url("https://ableton-production.imgix.net/about/photo-8.jpg?crop=right&dpr=1.5&fit=crop&h=250&ixjsv=1.1.3&q=66&w=417") no-repeat top 0% center/ contain;
}
.section--7__text {
  margin: 0 8%;
  padding: 8%;
  background-color: #11c01f;
}
.section--7__text p {
  margin: 0;
}

HTML #

<div class="section--7__container">
          <div class="section--7__photos"></div>
          <div class="section--7__text">
            <p class="text--main__1">
              Lorum...
            </p>
          </div>
</div>

实际代码 #

HTML #

<div class="section--7__container">
          <div class="section--7__photos"></div>
          <div class="section--7__text">
            <p class="text--main__1">
              Lorum...
            </p>
          </div>
</div>

CSS #

.section--7__photos {
  height: 50vw;
  max-height: 70rem;
  margin: 0 8%;
  background: url("Images/photo-8.jpg") no-repeat top 0% center/ contain;
}
.section--7__text {
  margin: 0 8%;
  padding: 8%;
  background-color: #11c01f;
}
.section--7__text p {
  margin: 0;
}

解决方案 #

方法1：改用cover填充容器 #

把背景图的contain换成cover，图片会自动拉伸或裁剪以填满整个容器高度，直接消除间隙。

修改后的CSS：

.section--7__photos {
  height: 50vw;
  max-height: 70rem;
  margin: 0 8%;
  background: url("Images/photo-8.jpg") no-repeat top center/ cover;
}

优点：操作简单，快速解决问题；缺点：图片可能被裁剪，需确认主体内容不会被裁掉。

方法2：按图片宽高比设置容器高度 #

先确定图片的宽高比（比如示例图中图片宽417px、高250px，比例为417:250），计算对应比例的vw值作为容器高度：(250/417)*100 ≈ 60vw，这样容器高度和图片比例一致，contain模式下图片会刚好填满容器，不会留空白。

修改后的CSS：

.section--7__photos {
  height: 60vw;
  max-height: 70rem;
  margin: 0 8%;
  background: url("Images/photo-8.jpg") no-repeat top center/ contain;
}

优点：能完整显示图片；缺点：需要准确知道图片的宽高比。

方法3：用padding-top维持宽高比（推荐响应式场景） #

去掉固定的height，用padding-top百分比设置容器高度（百分比基于父元素宽度），让容器自动保持和图片一致的比例，适配所有视口尺寸。

假设图片宽高比是417:250，计算padding-top: (250/417)*100% ≈ 60%：

修改后的CSS：

.section--7__photos {
  max-height: 70rem;
  margin: 0 8%;
  padding-top: 60%;
  background: url("Images/photo-8.jpg") no-repeat top center/ contain;
}

优点：完全响应式，容器比例始终匹配图片，不会出现间隙；缺点：需要先计算图片的宽高比。

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