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%"也不适合我。

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

希望这对某人有所帮助，

Answer 2

我认为它会起作用

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