React+Material UI：CardMedia图片无法适配Card容器高度问题

问题分析 #

你的代码里，LogoHolder是固定宽高的容器，但Logo（CardMedia）设置了height: auto，这会让图片保持原比例，无法填满容器高度。另外，当CardMedia指定component="img"时，误用了image属性（应该用src），这也可能导致渲染异常。

修复方案 #

1. 修正样式让图片适配容器高度

修改Logo的样式，让它继承父容器的高度，同时通过objectFit控制图片缩放方式：

const Logo = styled(CardMedia)(() => ({
    width: "100%",
    height: "100%", // 改为100%继承LogoHolder的高度
    objectFit: "contain", // 完整显示图片，若要填满容器可选cover
}))

给LogoHolder添加flex布局，让图片在容器内居中：

const LogoHolder = styled(Card)(() => ({
    boxShadow: "none",
    background: "none",
    width: "150px",
    height: "80px",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
}))

2. 修正CardMedia的属性

当使用component="img"时，图片路径应该用src而非image（image是CardMedia作为背景图时的属性）：

<Logo component="img" src={bank.logo} alt={`${bank.name} logo`} />

3. 简化结构（可选）

如果不需要额外的Card容器，可直接将CardMedia放在ToggleCard内，减少嵌套：

<ToggleCard value={bank.uuid} selected={selectedOpt === bank.uuid}
  onClick={() => handleSelectedOpt(bank.uuid)}
>
  <Logo component="img" src={bank.logo} alt={`${bank.name} logo`} />
</ToggleCard>

对应的Logo样式调整为：

const Logo = styled(CardMedia)(() => ({
    width: "150px",
    height: "80px",
    objectFit: "contain",
}))

关键说明 #

• objectFit: contain会保持图片原比例并完整显示在容器中，不会裁剪；cover会让图片填满容器但可能裁剪边缘，可根据需求选择。
• 确保图片路径正确，src属性是img组件的标准属性，避免和CardMedia的背景图属性混淆。

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