React中长图片无法显示水平滚动条的技术求助

我在React中尝试展示一张超长图片，希望能显示水平滚动条，但始终无法实现。已尝试使用MUI的Card、Box（component为img）以及原生<img>标签，均未出现滚动条。谷歌搜索到的多为轮播相关方案，并不适用。也尝试设置宽高、maxWidth/maxHeight，但仍无法触发滚动条。以下是我尝试的代码示例：

// 原生img尝试
<img src={Image(props.image)} alt={props.alt} width={300} height={194} overflow-y='scroll'/>

// MUI Box尝试
<Box
    component="img"
    sx={{
        height: 194,
        width: 1280,
        maxWidth: 1280,
        maxHeight: 194,
    }}
    alt={props.alt}
    src={Image(props.image)}
/>

/**
 * 验证图片是否存在并返回路径
 *
 * @param name 图片名称
 * @returns 图片路径或null（未找到时）
 */
const Image = (name) => {
    try {
        // 按需导入图片，示例路径："/rdt/static/media/barOrientation.e672f57a86d61511436d.png"
        const image = require("../../../assets/" + name);
        if (!image) return null;
        return image;
    } catch (error) {
        console.log(`图片 "${name}" 不存在`);
        return null;
    }
};

// Card场景尝试
return (
    <Card sx={{ maxWidth: 1280 }}>
        <CardHeader
            title={props.title}
        />
        <CardMedia
            style={{ height: 150, paddingTop: "2%" }}
            component="img"
            height="194"
            image={Image(props.image)}
            alt={props.alt}
        />
    </Card>
);

解决方案 #

问题核心：滚动属性不能直接加在图片元素上，必须给图片的父容器设置滚动规则。图片本身会自适应容器或保持原始尺寸，只有当父容器宽度小于图片宽度，且父容器开启overflow-x: auto时，才会触发水平滚动。

具体实现步骤 #

• 给图片包裹一个父容器（如MUI Box、原生div）
• 给父容器设置宽度限制（固定宽度或maxWidth），同时开启overflowX: 'auto'
• 禁止图片自动缩放：设置图片的maxWidth: 'none'，让图片保持原始宽度

修改后的Card场景代码 #

import { Card, CardHeader, CardMedia, Box } from '@mui/material';

const Image = (name) => {
  try {
    const image = require("../../../assets/" + name);
    if (!image) return null;
    return image;
  } catch (error) {
    console.log(`图片 "${name}" 不存在`);
    return null;
  }
};

export default function LongImageCard(props) {
  return (
    <Card sx={{ maxWidth: 1280 }}>
      <CardHeader title={props.title} />
      {/* 新增滚动容器 */}
      <Box sx={{ 
        maxWidth: '100%', 
        overflowX: 'auto', 
        padding: '0 16px 16px' // 可选：添加内边距优化视觉
      }}>
        <CardMedia
          component="img"
          sx={{ 
            height: 194, 
            maxWidth: 'none' // 关键：禁止图片缩放，保留原始宽度
          }}
          image={Image(props.image)}
          alt={props.alt}
        />
      </Box>
    </Card>
  );
}

原生img标签实现示例 #

<div style={{ maxWidth: 800, overflowX: 'auto' }}>
  <img 
    src={Image(props.image)} 
    alt={props.alt} 
    style={{ height: 194, maxWidth: 'none' }} 
  />
</div>

关键注意事项 #

• 父容器必须有明确的宽度限制，否则容器会被图片撑开，不会触发滚动
• overflowX: 'auto'仅在内容超出时显示滚动条，比scroll更友好
• 图片的maxWidth: 'none'是核心，避免图片被缩放到容器宽度内

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