Css 材质ui下一步：设置图像大小以适合容器

我从MaterialUI开始下一步，在显示使用整个容器大小的图像时遇到了一些问题。 例如，我使用：

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，但是，如果我应用该选项，则不会显示我的图像-

现在，对我来说，这是媒体高度的一次尝试和错误，它适合卡片容器而不被裁剪。 没有“自动”的方法来实现这一点吗

非常感谢您的帮助， 干杯，伙计们

托拜厄斯

---

编辑：我应该提到

高度：“100%”

/

最大高度：“100%”

对我也不起作用。

我也有同样的问题。将

宽度

和

高度

都设置为

'100%

对我来说很有效

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

然而，如果你的图像有不同的高度，这将导致卡片有不同的高度，大多数时候这不是你想要的。为此，您可以指定

高度

，并将

宽度保持在
'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'
  }
});

希望这对某人有帮助，
我想它会有用的

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