我只是无法在 Material-UI 的 CardMedia 中更改图像的高度和宽度图片:下面是我的代码。
<Grid
container
spacing={36}
direction="column"
alignItems="center"
justify="center"
style={{
minHeight: "100vh",
backgroundImage: `url(${Image})`,
height: "100%",
backgroundPosition: "center",
backgroundRepeat: "norepeat",
backgroundSize: "cover"
}}
>
<Paper style={{ height: "740px", width: "500px" }}>
<Card className={classes.card}>
<CardActionArea>
<CardMedia
style={{
height: "40px",
marginLeft: "113px",
paddingLeft: "56.25%",
paddingTop: "56.25%", // 16:9,
marginTop: "20px",
width: "30px"
}}
image={require("../../../Images/ApLogo/111.jpg")}
title="Login"
/>
<CardTitle
title="Log In"
style={{
marginLeft: "220px",
marginTop: "10px",
fontWeight: "bold"
}}
/>
<CardContent>
......
</CardContent>
</CardActionArea>
</Card>
</Paper>
</Grid>
最佳答案
您可以跳过 CardMedia 并在 CardActionArea 中编写带背景的 div 或自己使用图像标签。
或者更正您的 CardMedia Prop ,如下所示
因为 CardMedia 不接受 style 属性
`<CardMedia
component="img"
alt="Contemplative Reptile"
className={classes.media}
height="140"
image="/static/images/cards/contemplative-reptile.jpg"
title="Contemplative Reptile"
/>`
关于reactjs - 无法减小 React 组件中 Material UI CardMedia 中图像的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55198500/