How to resize the image within grid, because every image has different dimensions so as they behave in Grid. I want to fit an image on top horizontal Grid, but when i set my desired height (e.g. height:'300px') instead of stretching and fitting into container, image become cropped. What should i do so that any image can fit into Grid container.
const backgroundImage = require('../../styles/img/grid/badshah.jpg');
export default function Saifulmalok() {
const classes = useStyles();
return (
<React.Fragment>
<Container maxWidth="lg" >
<Grid xs={12} justify="space-between"
style={{backgroundImage: `url(${backgroundImage})`,
height:'300px',
marginTop: 20,
backgroundSize:'cover'
}}>
</Grid>
</Container>
</React.Fragment>
);
}