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的高度，但是，如果我应用了我的图像未显示 - 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'
  }
});

希望这对某人有帮助

Answer 2

我认为它会起作用

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

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

2 个答案: