将图像拟合到 Material-ui 网格中答案

【问题标题】：Fit an image into a material-ui grid将图像拟合到 Material-ui 网格中
【发布时间】：2020-07-04 21:09:51
【问题描述】：

如何在网格中调整图像的大小，因为每个图像都有不同的尺寸，因此它们在网格中的行为。我想在顶部水平网格上放置一个图像，但是当我设置我想要的高度（例如高度：'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>
  );
}

【问题讨论】：

标签： javascript reactjs grid material-ui

【解决方案1】：

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

【讨论】：

图像在屏幕左侧，没有覆盖整个网格。