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

【问题标题】：material-ui-next: Setting image size to fit a containermaterial-ui-next：设置图像大小以适合容器
【发布时间】：2018-10-19 12:26:09
【问题描述】：

我从 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%" 对我也不起作用。

【问题讨论】：

标签： css reactjs material-ui image-size

【解决方案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'
  }
});

希望这对某人有所帮助，

【讨论】：

【解决方案2】：

我认为它会起作用

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

【讨论】：