React图片滑块设置百分比高度时下方div抖动问题求解

• 你当前的代码仅在激活状态的slide内渲染图片，切换幻灯片时旧图片会被直接销毁，新图片需要加载渲染，过渡期间滑块容器没有内容支撑，高度临时坍塌，新图片加载完成后容器高度才恢复，就会导致下方div出现上下抖动。
• 百分比高度需要依赖父元素的明确高度才能正常计算，你当前层级下.slider、AppContainer的高度都是100%，但上层html、body、root节点没有设置明确高度，百分比高度计算逻辑不稳定，进一步加剧了切换时的高度闪变。

不需要依赖百分比高度即可实现窗口宽度变化时图片高度等比缩放，比百分比高度方案更稳定，修改步骤如下：

1. 修改ImageSlider.js的图片渲染逻辑 #

取消图片的条件渲染，所有slide内的图片都提前渲染，仅通过透明度控制显隐，保证滑块容器高度始终被内容支撑：

// 原代码
{slides?.map((slide, index) => (
    <div className={index === current ? 'slide active' : 'slide'} key={index}>
        {index === current && (
            <img src={slide?.image} alt='travel image' className='image'/>
        )}
    </div>
))}

// 修改后代码
{slides?.map((slide, index) => (
    <div className={index === current ? 'slide active' : 'slide'} key={index}>
        <img src={slide?.image} alt='travel image' className='image'/>
    </div>
))}

2. 修改ImageSlider.css样式 #

调整滑块容器样式，固定宽高比实现自动等比缩放 #

.slider {
    position: relative;
    width: calc(100% - 20px); /* 适配左右10px的margin */
    aspect-ratio: 16/9; /* 和你原来的图片比例一致，宽度变化时高度自动按比例计算 */
    margin: 10px 10px 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    overflow: hidden;
}

调整slide样式，让所有slide堆叠在同一位置 #

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 1.5s ease;
}

.slide.active {
    opacity: 1;
    transform: scale(1.05);
}

调整图片样式，保证图片填满容器不变形 #

.image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

• 滑块容器通过aspect-ratio固定宽高比，窗口宽度变化时高度自动等比缩放，完全符合你的需求。
• 所有图片提前渲染，切换过程中滑块容器高度不会发生任何变化，彻底消除下方div的抖动问题。
• 不需要依赖百分比高度的层级计算逻辑，兼容性和稳定性更强。

内容的提问来源于stack exchange，提问作者Abraham G.