material-ui-next：设置图像大小以适合容器

Question

我已经开始使用 Material-ui-next 并且在显示他们使用整个容器大小的图像时遇到了一些问题。例如我使用：

const styles = theme => ({
  Card: {
    width: 300,
    margin: 'auto'
  },
  Media: {
    height: 550
  }
});

在渲染中：

<Card className={classes.Card}>
   <CardMedia
        className={classes.Media}
        image={ImgPomodoR}
        title="a pomodoro tomatoe timer in material design"
   />
   <CardContent>
      <Typography gutterBottom variant="headline" component="h2">
        ...

文档说我必须指定图像的高度才能显示。“媒体”示例使图像的高度为 0，但是，如果我应用我的图像未显示 -提到的示例。

现在，对我来说，这是媒体高度的反复试验，它适合 Card 容器而不会被裁剪。有没有“自动”的方式来做到这一点？

任何帮助都受到高度赞赏，欢呼伙伴们，

托比亚斯

编辑：我应该提到height: "100%"//maxHeight: "100%"对我也不起作用。

Answer 1

我遇到了同样的问题。同时设置width以及height到'100%'为我工作。

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

但是，如果您的图像具有不同的高度，这将导致卡片的高度不同，并且大多数情况下这不是您想要的。为此，您可以指定 aheight并保留widthat '100%'。

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

这将拉伸图像以适合容器。就我而言，我希望在不拉伸图像的情况下显示部分图像。要实现这一点，只需将该objectFit属性设置为cover。这对我来说效果很好。

const styles = theme => ({
  Card: {
    width: 300,
    margin: 'auto'
  },
  Media: {
    height: 550,
    width: '100%',
    objectFit: 'cover'
  }
});

希望这可以帮助某人，