窗口缩放时容器适配问题：图片下方间隙的解决问询

问题根源 #

你当前代码里，#home-info 固定了 height: 400px，同时 .info-img 使用 background-size: 100%——这会强制背景图铺满容器宽度，但图片会按原比例缩放，窗口变窄时，图片高度按比例缩小后会小于容器的400px高度，导致下方出现空白间隙。另外float布局在响应式场景下容易出现高度对齐问题。

修复方案 #

1. 用Flex布局替代Float #

Flex布局能更好处理响应式场景下的元素对齐和尺寸适配，避免浮动带来的布局偏移。

2. 优化背景图属性 #

使用 background-size: cover 保持图片比例，同时让图片铺满整个容器，搭配 background-position: center center 确保图片居中显示，杜绝空白。

3. 调整容器高度为自适应 #

去掉固定高度，改用 min-height 保证容器最小高度，同时让高度随内容或背景图自适应。

修改后的完整CSS代码 #

#home-info {
  display: flex;
  min-height: 400px; /* 保留最小高度，避免容器过矮 */
}

#home-info .info-img {
  width: 50%;
  background: url('../img/archway.jpg') no-repeat center center/cover;
}

#home-info .info-content {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 让内容垂直居中 */
  text-align: center;
  padding: 50px 30px;
  overflow: hidden;
  box-sizing: border-box; /* 确保padding不影响宽度计算 */
}

#home-info .info-content p {
  padding-bottom: 30px;
}

/* Features 部分优化 */
#features {
  display: flex;
  flex-wrap: wrap; /* 小屏幕自动换行 */
}

.box{
  flex: 1 1 33.333%; /* 保持宽度占比，允许小屏幕收缩 */
  padding:60px;
  text-align:center;
  box-sizing: border-box;
}

.box i{
  margin-bottom:10px;
}

额外说明 #

• box-sizing: border-box 确保元素的padding不会撑开容器宽度，避免布局错位；
• background-size: cover 会裁剪图片多余部分，但能保证容器始终被图片填满，不会出现空白；
• Flex布局的 flex-wrap: wrap 让features部分在小屏幕下自动换行，适配不同设备宽度。

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