Material-ui-next：如何让CardMedia图片自适应Card容器？

我刚上手Material-UI Next的时候也碰到过这个一模一样的问题！官方文档说必须指定高度才能显示图片，但那个用height:0的示例一开始我也没搞懂怎么回事，试了半天图片就是不显示，反复调height值真的太折腾了。

其实核心是没注意到官方示例里配合height:0一起用的paddingTop属性——这个才是实现自适应宽高比的关键！下面给你两种实用的解决方案，根据你的需求选就行：

方案一：固定宽高比，自适应容器宽度（推荐） #

这个方法能让图片始终保持你设定的宽高比，完美适配Card的宽度，不会被裁剪，布局也更稳定。

修改后的样式代码： #

const styles = theme => ({
  Card: {
    width: 300,
    margin: 'auto'
  },
  Media: {
    position: 'relative',
    paddingTop: '150%', // 这里根据你的图片比例调整：比如16:9是56.25%，4:3是75%
    height: 0,
    overflow: 'hidden'
  },
  MediaImg: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    objectFit: 'cover' // 可选：用'contain'则不裁剪图片，但可能留空白
  }
});

渲染部分代码： #

<Card className={classes.Card}>
  <CardMedia className={classes.Media}>
    <img
      className={classes.MediaImg}
      src={ImgPomodoR}
      alt="a pomodoro tomatoe timer in material design"
    />
  </CardMedia>
  <CardContent>
    <Typography gutterBottom variant="headline" component="h2">
      {/* 你的标题内容 */}
    </Typography>
    {/* 其他Card内容 */}
  </CardContent>
</Card>

关键属性解释： #

• paddingTop: '150%'：CSS中百分比的padding是基于父元素宽度计算的，所以这个值能帮你固定图片的宽高比，Card宽度变了，图片高度会自动跟着调整。
• height: 0：让CardMedia本身不占用额外高度，完全由paddingTop来控制容器高度。
• objectFit: 'cover'：保证图片填满容器，按比例缩放，超出部分裁剪；如果想完整显示图片（不裁剪），换成objectFit: 'contain'即可。

方案二：图片高度自适应内容（不固定宽高比） #

如果你不需要固定Card的高度，想让图片按原比例完整显示，Card高度跟着图片走，可以用这个方法：

样式代码： #

const styles = theme => ({
  Card: {
    width: 300,
    margin: 'auto'
  },
  Media: {
    height: 'auto'
  },
  MediaImg: {
    width: '100%',
    height: 'auto',
    display: 'block'
  }
});

渲染部分和方案一类似，只是去掉了position相关设置，直接用img标签即可。 #

这个方法的好处是图片不会被裁剪，但缺点是Card的高度会随着图片尺寸变化，布局可能不够固定，适合对Card高度没有严格要求的场景。

为什么之前设置height: 100%没用？ #

因为CardMedia的父元素（Card）默认没有设置固定高度，所以height: 100%找不到参照的高度值，自然不会生效。而方案一中用paddingTop的方式，是基于Card的宽度来计算，所以能正常工作。

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