响应式背景图布局问题：移除固定高度后div出现间隙

嘿，我来帮你搞定这个问题！你遇到的间隙和响应式适配问题，根源在于移除固定height后，div没有合适的方式维持背景图的宽高比，导致高度计算异常或者出现排版间隙。下面是具体的解决方案：

核心思路：用padding-top维持背景图比例 #

因为你的两张图片都是固定宽高（1920px宽），我们可以利用CSS中padding百分比基于父元素宽度计算的特性，让div的高度随宽度等比例缩放，既不用固定height，又能让背景图完美填充div，同时消除间隙。

第一步：计算图片宽高比例

先算出每张图的高度与宽度的百分比：

• 顶部图：976 ÷ 1920 × 100% ≈ 50.833%
• 下方图：567 ÷ 1920 × 100% ≈ 29.531%

第二步：修改CSS代码

把固定height替换成对应的padding-top，同时调整背景图的适配属性，确保完美填充：

/* 初始化全局样式，消除默认边距 */
body {
  margin: 0;
  padding: 0;
}

#house-top {
  height: 0; /* 禁用固定高度，由padding-top撑起 */
  padding-top: 50.833%; /* 对应图片宽高比 */
  background-image: url('./img/house-top.png');
  background-repeat: no-repeat;
  background-size: cover; /* 让背景图自适应div尺寸，保持比例 */
  background-position: center center; /* 确保图片居中显示 */
}

#vse-doma-section-2 {
  height: 0;
  padding-top: 29.531%;
  background-image: url('./img/vse-doma-section-2.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

第三步：排查残留间隙

如果还能看到间隙，检查这两点：

• 图片本身是否带有透明边或者底部空白：可以用图片编辑工具裁剪掉图片多余的空白区域
• 父容器是否有默认的margin/padding：上面的全局样式已经初始化了body的边距，要是还有其他父容器，也需要清除它们的默认边距

为什么这个方法管用？ #

padding-top的百分比值会随着父元素（这里是body，也就是页面宽度）的变化自动调整高度，完美匹配图片的宽高比，既实现了响应式适配，又避免了固定height带来的拉伸变形问题，同时div的高度完全由padding撑起，不会出现高度塌陷或莫名的排版间隙。

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