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">
        ...

文档说我必须指定要显示的图像的高度。 'media'示例为图像提供了0的高度，但是，如果我应用我的图像没有显示 - mentioned example。

现在，对我来说，这是Media-height的试验和错误，它适合Card容器而不被裁剪。这样做没有“自动”方式吗？

任何帮助都非常感谢，欢呼伙伴，

托比亚斯

编辑：我应该提一下height: "100%" // maxHeight: "100%"也不适合我。

Answer 1

我遇到了同样的问题。将width和height设置为'100%'对我有用。

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

但是，如果您的图像具有不同的高度，这将导致卡片具有不同的高度，并且大部分时间不是您想要的。为此，您可以指定height并将width保留在'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'
  }
});

希望这有助于某人，