页面缩放时纯CSS图片轮播与下方内容错位问题求解

你当前轮播和下方内容错位的核心原因是轮播容器使用了固定高度，没有跟随图片比例自适应缩放：

• 你给#slider设置了固定height: 409px，当页面宽度小于952px时，内部背景图按contain规则等比例缩小，视觉上轮播高度降低，但#slider容器本身的高度仍然保持409px不变，下方内容按照容器的固定高度排布，就会出现错位、空白或者重叠的问题。

仅需要修改两处CSS代码即可实现轮播高度自适应，下方内容自动跟随排布：

1. 修改轮播容器#slider的样式，删除固定高度，改用padding百分比实现自适应等比高度

#slider {
    max-width: 100vw;
    width: 952px;
    /* 删除原有的height: 409px */
    padding-top: 42.96%; /* 409÷952≈42.96%，和轮播图的宽高比完全匹配 */
    overflow: hidden;
    position: relative;
    margin-top: 23px;
    margin-bottom: 45px;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFF;
}

2. 给轮播内部的滑块补充定位属性，确保滑块铺满整个容器

#slider > div {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 0; /* 新增 */
    left: 0; /* 新增 */
    animation: slide 20s infinite;
    opacity: 0;
}

修改完成后，轮播容器高度会始终跟随宽度按照原图片比例自适应缩放，下方的文本块、服务模块、页脚都会跟随轮播底部自动调整位置，不会再出现错位问题。

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