Material-UI: 具有相同高度的网格项

Question

我想把这些网格项放到相同的高度，而不是拉伸它们。

这是它的样子：

这就是我想要的：

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

注意：我用过material-uiv4

<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>

Answer 1

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

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

you might want to display a video or a responsive image. Use the component prop for these use cases

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

更多信息：https://mui.com/components/cards/#media

Material-UI: 具有相同高度的网格项

Material-UI: Grid items with same height

css

responsive-design

reactjs

material-ui