Material-UI：具有相同高度的网格项目答案

【问题标题】：Material-UI: Grid items with same heightMaterial-UI：具有相同高度的网格项目
【发布时间】：2022-02-10 22:31:04
【问题描述】：

我想将这些网格项目带到相同的高度，但不要拉伸它们。

这就是它的样子：

这就是我想要的：

但我只能通过手动设置图像宽度来做到这一点，因此它没有响应。用户可以替换此图像，因此不能选择设置固定尺寸。任何帮助表示赞赏。这是复制所需的最少代码（我已删除卡片中的内容以保持代码最少）：

注意：我用的是material-ui v4

<Grid container spacing={3}>
   <Grid item lg={12} md={12} sm={12} xs={12}>
      <Grid container spacing={3} className="mb-3">
         <Grid item xs={12} md={3}>
            <Card
               className="justify-between items-center p-sm-24 bg-paper dashboard-card"
               elevation={6}
               >
            </Card>
         </Grid>
         <Grid item xs={12} md={3}>
            <Card
               className="justify-between items-center p-sm-24 bg-paper dashboard-card"
               elevation={6}
               >
            </Card>
         </Grid>
         <Grid item xs={12} md={6}>
            <Card className="bg-paper" elevation={6}>
               <CardContent className="flex justify-center">
                  <img
                  src={this.state.logo}
                  alt="logo"
                  style={{ width: "100%" }}
                  />
               </CardContent>
            </Card>
         </Grid>
      </Grid>
   </Grid>
</Grid>

【问题讨论】：

你检查过style={{ object-fit: 'contain' }}
@SteveGomez 我在图像上尝试了 maxHeight，但它没有响应。这就是我遇到的问题。用户可以替换此图像，因此不能选择设置固定尺寸。这就是为什么我需要一个确保响应能力的解决方案。我也将这部分添加到问题中。
@PrashantJangam 是的，我做到了。它没有工作

标签： css reactjs responsive-design material-ui

【解决方案1】：

我不确定这是否是最好的方法，但它对我有用。所以我在回答我自己的问题。

我没有使用图像标签，而是使用了 CardMedia 组件，它允许设置高度以匹配其他卡片，并且它也是响应式的。

您可能想要显示视频或响应式图片。为这些用例使用组件道具

<CardMedia
  component="img"
  alt="green iguana"
  height="140"
  image="/static/images/cards/contemplative-reptile.jpg"
  />

【讨论】：