reactjs - 无法减小 React 组件中 Material UI CardMedia 中图像的大小

Question

我只是无法在 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>

我已经看过了this和 this 。但这些都没有解决我的问题。

Answer 1

您可以跳过 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"
 />`