react-slideshow-image轮播图无法随屏幕尺寸自适应，图片被截断如何解决？

问题根因 #

当前代码出现图片截断的核心原因有两点：

• 轮播容器设置了固定高度350px，屏幕宽度缩小时高度不会按图片比例同步缩放
• background-size: cover 配置会强制背景图撑满容器，超出容器范围的内容会被直接裁剪

调整步骤 #

1. 替换CSS固定高度为自适应宽高比配置 #

用padding百分比实现容器高度随宽度按比例自适应，根据你的轮播图原始比例调整参数即可，修改后CSS如下：

.each-slide > div{
   display: flex;
   align-items: center;
   justify-content: center;
   /* 调整背景图展示规则，保证完整显示不裁剪 */
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   /* 移除固定高度，用padding实现宽高比自适应 */
   height: auto;
   padding-top: 56.25%; /* 对应16:9的图片比例，4:3比例可改为75%，按需调整 */
   width: 100%;
}

/* 可选：小屏幕下单独适配比例 */
@media (max-width: 768px) {
  .each-slide > div {
    padding-top: 75%;
  }
}

如果需要背景图铺满容器不留白，可以保留background-size: cover，配合background-position: center保证图片核心内容居中展示，不会被裁到重要区域。

2. 可选：替换背景图为img标签实现自适应 #

如果不需要在轮播图上叠加其他内容，直接用img标签的方案更简单，无需额外处理背景属性：
首先修改React组件代码：

import 'react-slideshow-image/dist/styles.css'

<Slide easing="ease">
      <div className="each-slide">
          <img src={slideImages[0]} alt="轮播图" style={{width: '100%', height: 'auto'}} />
      </div>
      <div className="each-slide">
          <img src={slideImages[1]} alt="轮播图" style={{width: '100%', height: 'auto'}} />
      </div>
</Slide>

对应可以简化CSS：

.each-slide {
  width: 100%;
}

3. 可选：配置Slide组件响应式参数 #

可给组件添加responsive属性，适配不同屏幕下的轮播交互：

<Slide 
  easing="ease"
  responsive={[
    {
      breakpoint: 768,
      settings: {
        arrows: false, // 小屏幕隐藏左右切换箭头
      }
    }
  ]}
>
{/* 轮播内容 */}
</Slide>

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