react-simple-image-slider如何自定义宽高实现移动端响应式

react-simple-image-slider 组件的 width、height 属性仅支持数值类型的像素单位，不接受vw、百分比等相对单位，要实现响应式只需要动态计算当前容器对应的像素尺寸，传给组件即可。

方案1：基于父容器宽度适配（推荐） #

这个方案会自动跟随父容器的宽度变化调整轮播尺寸，适配flex、栅格等各种布局场景，不会出现溢出或宽度不足的问题。

1. 给外层包裹容器绑定ref，用来获取容器的实际渲染宽度
2. 按你需要的图片宽高比，通过容器宽度计算对应的轮播高度
3. 监听容器尺寸变化，实时更新宽高值传给组件

完整实现代码：

import { useState, useEffect, useRef } from 'react';
import SimpleImageSlider from "react-simple-image-slider";

// 自定义你需要的宽高比，原示例400*300对应4:3
const IMAGE_ASPECT_RATIO = 4 / 3;

function CardSlider({ item }) {
  const imgBoxRef = useRef(null);
  const [sliderSize, setSliderSize] = useState({
    width: 400,
    height: 300
  });

  const calcSize = () => {
    if (!imgBoxRef.current) return;
    const containerWidth = imgBoxRef.current.clientWidth;
    setSliderSize({
      width: containerWidth,
      height: containerWidth / IMAGE_ASPECT_RATIO
    });
  };

  useEffect(() => {
    calcSize();
    // 用ResizeObserver监听父容器尺寸变化，比监听window.resize更精准
    const resizeObserver = new ResizeObserver(calcSize);
    resizeObserver.observe(imgBoxRef.current);
    
    return () => resizeObserver.disconnect();
  }, []);

  return (
    // 外层容器设置相对宽度，保证自身先实现响应式
    <div 
      className="card_imgBox" 
      ref={imgBoxRef}
      style={{ width: '100%' }}
    >
      <SimpleImageSlider
        className="card_img"
        width={sliderSize.width}
        height={sliderSize.height}
        images={item.thumb}
        showBullets={true}
        showNavs={true}
      />
    </div>
  );
}

export default CardSlider;

方案2：基于视口宽度快速适配 #

如果你的轮播需要直接跟随屏幕宽度变化，不需要参考父容器宽度，可以直接读取视口宽度计算尺寸，写法更简单：

const [viewportWidth, setViewportWidth] = useState(window.innerWidth);

useEffect(() => {
  const handleResize = () => setViewportWidth(window.innerWidth);
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

// 直接传计算后的像素值即可，高度按比例调整
<SimpleImageSlider
  width={viewportWidth}
  height={viewportWidth * 0.75} // 0.75对应4:3比例，按需修改
  images={item.thumb}
  showBullets={true}
  showNavs={true}
/>

注意事项 #

• 外层容器必须设置相对宽度（比如width: 100%、width: 90vw），不能写死固定像素，否则无法触发响应式变化
• 宽高比可以根据你的实际图片尺寸调整，比如16:9的图就把比例值改为16/9，避免图片拉伸变形
• 不需要额外给组件本身加CSS强制宽高，动态传入的像素值会自动适配不同设备

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