CardMedia中的可变高度

Question

我想创建高度不同但宽度相同的卡片，这样我的图像就不会在卡片内被裁剪。到目前为止，我只发现了如何使用jss制作具有固定比率的CardMedias。任何人都可以指出我在加载图像后可以在其中放置代码以更改图像高度的地方吗？

const styles = theme => ({
  root: {
    marginTop: 36
  },
  card: {
    margin: "auto",
    maxWidth: 540
  },
  media: {
    height: 0,
    paddingTop: "100%"
  }
});

 ...

  renderMedia() {
    if (!this.props.user.media.length) {
      return;
    }

    return this.props.user.media.map(media => {
      return (
        <Grid item xs={12}>
          <Card className={this.classes.card}>
            <CardMedia
              className={this.classes.media}
              image="https://picsum.photos/300/500"
            />
            <CardContent>
              <Typography variant="body2" color="textSecondary" component="p">
                {media.content}
              </Typography>
            </CardContent>
          </Card>
        </Grid>
      );
    });
  }