将图像放入 Material-ui 网格中

Question

如何在网格内调整图像大小，因为每个图像都有不同的尺寸，以便它们在网格中的行为。我想在顶部水平网格上放置图像，但是当我设置所需的高度（例如高度：'300px'）而不是拉伸并适合容器时，图像会被裁剪。我应该做什么才能使任何图像都适合网格容器。

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>
  );
}

Answer 1

您只需要使用backgroundSize: 'contain'和backgroundRepeat: 'no-repeat'。如果您想要一个图像列表，请尝试使用具有相同尺寸的图像以实现整体设计。