I am attempting to resize the image inside a Grid to match the size of the parent Grid. I have tried using minheight and height properties, but they do not seem to be effective. I also attempted to use a styled component for this purpose.
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>