如何使用父网格容器材质 UI 强制图像调整大小答案

【问题标题】：How to force img to resize with parent Grid container Materual UI如何使用父网格容器材质 UI 强制图像调整大小
【发布时间】：2022-01-03 22:20:55
【问题描述】：

我正在尝试强制网格内的图像将 w 调整为父网格的大小。尝试了 minheight 和 height 但似乎没有用。还尝试了样式化组件。

    return (
    <Grid container sx={{ margin: '50px 0 40px 0'}} justifyContent='center' alignItems='center'>
        <Grid item container sm={10} md={6} direction='column' justifyContent='flex-start'>
            <Typography sx={{ margin: '20px 20px 20px 0'}} variant='h2'>
                NFT Louvre
            </Typography>
            <Typography sx={{ margin: '20px 20px 20px 0'}} variant='h4'>
                See Human Art through an AI's eyes
            </Typography>
            <Typography sx={{ margin: '20px 20px 20px 0'}} variant='h6'>
                Featured Collection: Bouquets - Genesis
            </Typography>
        </Grid>
        <Grid item sm={10} md={6}>
            <img sx={{minHeight: '100%', minWidth: '100%'}} src={gif} alt='Bouquets - Genesis'/>
        </Grid>
    </Grid>

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

...
        <Grid item sm={10} md={6}>
          <Box position="relative" width="100%" height="100%">
            <span style={{ position: 'absolute', top: 0, right: 0, left: 0, bottom: 0, backgroundSize: 'cover', backgroundPosition: 'center', backgroundImage: `url(${gif})` }} />
          </Box>
        </Grid>
    </Grid>

与此类似。 https://mui.com/components/buttons/#complex-button

【讨论】：

我最终使用了 Card 和 CardMedia，它运行良好。谢谢你的回答！