如何让ImageListItem中的Img占满Card组件的全部空间？

需要实现的目标：让ImageListItem占满Card组件内部全部可用空间，制作带圆角、图片为背景、底部配置文本栏的圆角卡片。
存在的故障：ImageListItem高度仅能和图片本身原生高度保持一致，无法将图片和底部ImageListItemBar拉伸至占满Card的全部内部空间，尝试在各层级组件添加minHeight: 100%、height: 100%样式均未生效。

• 实际效果参考：
• 预期效果参考：，图片需要填充Card内全部预留的蓝色区域。

<Card key={item.name} sx={{ width: 'auto', height: 'auto', aspectRatio: '1 / 1' }}>
    <CardContent sx={{ padding: 0, maxHeight: '100%' }}>
        <ImageListItem sx={{ maxHeight: '100%', padding: 0 }}>
            <img
                src={`${item.img}?w=248&fit=crop&auto=format`}
                srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
                alt={item.name}
                loading="lazy"
            />
            <ImageListItemBar title={item.name} subtitle={item.sciName} />
         </ImageListItem>
     </CardContent>
 </Card>

故障核心原因：CSS百分比高度生效的前提是父元素存在可被计算的明确高度，仅设置maxHeight无法触发高度继承，且内部图片默认按原生尺寸渲染，没有配置撑满容器的样式。
修复步骤：

• 沿Card到内部ImageListItem的容器链路，逐层设置height: 100%，保证高度可以被正确继承计算
• 给img标签设置宽高100%+object-fit: cover，让图片撑满容器同时保持比例不变形
• 给Card添加overflow: hidden，配合圆角裁剪溢出的图片边角，避免出现直角穿模
• 移除冗余的height: 'auto'、maxHeight无效配置

修复后可直接运行的代码：

<Card 
  key={item.name} 
  sx={{ 
    width: 'auto', 
    aspectRatio: '1 / 1',
    overflow: 'hidden'
  }}
>
    <CardContent sx={{ padding: 0, height: '100%' }}>
        <ImageListItem sx={{ height: '100%', padding: 0, gap: 0 }}>
            <img
                style={{
                  width: '100%',
                  height: '100%',
                  objectFit: 'cover'
                }}
                src={`${item.img}?w=248&fit=crop&auto=format`}
                srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
                alt={item.name}
                loading="lazy"
            />
            <ImageListItemBar title={item.name} subtitle={item.sciName} />
         </ImageListItem>
     </CardContent>
 </Card>

注意：如果仍存在底部微小缝隙，可检查ImageListItem默认的gap样式，设置gap: 0即可消除。

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