將圖像適合 material-ui 網格

Question

如何在網格中調整圖像的大小，因為每個圖像都有不同的尺寸，因此它們在網格中的行為。 我想在頂部水平網格上放置一個圖像，但是當我設置我想要的高度（例如高度：'300px'）而不是拉伸並適合容器時，圖像會被裁剪。 我應該怎么做才能使任何圖像都適合 Grid 容器。

 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' 。 如果您想要一個圖像列表，請嘗試使用具有相同尺寸的圖像來進行整體設計。