缩小视口宽度时相邻div间距增大的CSS布局问题求助

你遇到的间距随视口缩小不断增大的问题，核心是轮播区域的高度设置逻辑错误：

• 你给.posters硬写了height: 100vh（高度始终等于视口高度），但内部轮播图设置了width: 100%，会随视口宽度等比缩放，视口越窄，图片自身的渲染高度越小。
• 轮播的三个.container元素都设置了position: absolute，脱离正常文档流，你没有给这些容器设置height: 100%，导致图片的高度继承失效，最终.posters区块的100vh高度里，只有上方一部分被图片占据，剩下的空白区域就成了图片和下方绿色区块的间距，视口越窄，空白高度越大，间距就越明显。

只需要调整3处CSS样式即可：

1. 移除.posters硬编码的height: 100vh，改用aspect-ratio匹配轮播图原始宽高比（你用的三张轮播图原始比例都是2:1），让轮播区域高度随宽度自适应，同时解决绝对定位子元素导致的父级高度塌陷问题。
2. 给绝对定位的.posters .container补全height: 100%，让轮播容器填满父级区域。
3. 调整轮播图img的样式，加display: block消除行内元素默认的底部基线间隙，用object-fit: cover保证图片填充容器时不变形。

/* 修改posters类样式 */
.posters {
  padding: 0;
  color: white;
  text-align: center;
  position: relative;
  margin-top: 48px;
  margin-bottom: 0;
  width: 100%;
  /* 删除原代码里的 height: 100vh; 新增下方宽高比属性 */
  aspect-ratio: 2 / 1;
}

/* 修改轮播container样式 */
.posters .container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* 新增这行，让容器完全填满父级 */
  animation-duration: 12s;
  animation-iteration-count: infinite;
}

/* 修改轮播图img样式 */
.posters .container>div img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 替换原代码的height: inherit，保证图片填充时不变形 */
  display: block; /* 消除行内图片默认的3px底部基线间隙 */
}

如果需要兼容不支持aspect-ratio的老旧浏览器，可以把.posters的样式改成height: 0; padding-top: 50%;，利用padding百分比基于父元素宽度计算的特性实现同样的2:1自适应高度效果，其余代码不用改动。

改完后轮播区域高度会和图片缩放高度完全匹配，下方的绿色文本区块会始终紧贴轮播图底部，不会再出现随视口缩小间距变大的问题。

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