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，但是，如果我应用此设置，我的图像就无法显示-提到的示例。

现在，对我来说，媒体高度是试错的过程，以使其适合卡片容器而不被裁剪。 没有自动完成此操作的方法吗？

非常感谢任何帮助， 朋友们干杯，

托比亚斯

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

- Caruso33

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'
  }
});

希望这能帮助到有需要的人，

- Ege Aydın

Answer 2

我认为这会起作用

const styles = theme => ({
  card:{
    backgroundColor: 'white',
    marginBottom: 40,
  },
  media: {
    height: 0,
    // paddingTop: '56.25%', // 16:9,
    paddingTop: '100%', // 1:1,
  },
});

- Trương Hùng