重大的UI卡媒体大小调整图像

Question

我使用材质ui来使用卡介质CSS，但是我无法正确调整图像大小。图像被裁剪。而且，即使我改变高度，图像也会被裁剪掉。

我什至关注了这篇帖子Image on Material UI CardMedia，但没有任何效果。 有什么建议吗？

const useStyles = makeStyles(theme => ({
  card: {
    display: "flex",
    width: "1000px",
    height: "200px",
    marginTop: "5px"
  },
  details: {
    flexDirection: "column",
    position: "relative"
  },
  content: {
    flex: "1 0 auto",
    width: 700
  },
  cover: {
    width: 300,
    height: 100
  },
  buttonAction: {
    position: "absolute",
    bottom: "0",
    right: "0"
  }
}));

export default function Product() {
  const classes = useStyles();

  return (
    <>
      {Products.map(product => {
        return (
          <Card className={classes.card}>
            <CardMedia
              className={classes.cover}
              image="https://a.scdn.gr/images/sku_main_images/012749/12749690/20170912224330_apple_iphone_x.jpeg"
              title=""
            />
            <div className={classes.details}>
              <CardContent className={classes.content}>
                <Typography component="h5" variant="h5">
                 ""
                </Typography>
                <Typography variant="subtitle2" color="textSecondary">
                  ""
                </Typography>

                <Typography variant="subtitle1" color="primary">
                  ""
                </Typography>
              </CardContent>
              <CardActions className={classes.buttonAction}>
                <Button size="small" color="primary">
                  ADD
                </Button>
              </CardActions>
            </div>
          </Card>
        );
      })}
    </>
  );
}