Material UI中如何强制img标签随父级Grid容器自适应调整尺寸

问题原因 #

你的代码核心问题有两个：

1. sx是Material UI专属的样式属性，只能作用在MUI官方提供的组件上，你写在原生<img>标签上的样式完全不会生效
2. 图片的父级Grid item没有明确的尺寸约束，子元素设置百分比宽高的前提是父元素有确定的宽高值

解决方案 #

你可以直接用MUI的Box组件封装原生img来支持sx属性，同时给图片添加响应式适配规则，修改后的代码如下：

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} sx={{width: '100%'}}>
        <Box 
            component="img"
            sx={{
                width: '100%',
                height: 'auto',
                // 如果需要图片高度和左侧文本列保持一致，加上下面两行
                // height: '100%',
                // objectFit: 'contain'
            }} 
            src={gif} 
            alt='Bouquets - Genesis'
        />
    </Grid>
</Grid>

改动说明 #

• 用Box component="img"替代原生img标签，让sx属性可以正常生效
• 新增width: "100%"、height: "auto"配置：保证图片宽度始终铺满父Grid容器，高度随宽度等比缩放，不会出现拉伸变形
• 可选配置objectFit属性：设置为contain会让图片完整展示在容器内不裁切，设置为cover会让图片铺满容器，多余部分自动裁切，可根据实际需求选择

内容的提问来源于stack exchange，提问作者burneverything1