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并在背景中写入div，也可以在CardActionArea中自己使用图像标签。

或按此处更正CardMedia道具

因为CardMedia不接受样式道具

`<CardMedia
      component="img"
      alt="Contemplative Reptile"
      className={classes.media}
      height="140"
      image="/static/images/cards/contemplative-reptile.jpg"
      title="Contemplative Reptile"
 />`

Answer 2

您可以使用className道具来应用样式。这是一个示例：

const { withStyles, Card, CardHeader, CardMedia, CardContent, Typography} =  window['material-ui'];

const styles = theme => ({
  card: {
    maxWidth: 400,
  },
  media: {           // this is the`className` passed to `CardMedia` later
    height: 100,     // as an example I am modifying width and height
    width: '33%',
    marginLeft: '33%'
  },
});

class Demo extends React.Component {
  render() {
    const { classes } = this.props;

    return (
      <Card className={classes.card}>
        <CardHeader
          title="Shrimp and Chorizo Paella"
          subheader="September 14, 2016"
        />
        <CardMedia
          className={classes.media}
          image="https://picsum.photos/800/450"
          title="Paella dish"
        />
        <CardContent>
          <Typography component="p">
            This impressive paella is a perfect party dish and a fun meal to cook together with your
            guests. Add 1 cup of frozen peas along with the mussels, if you like.
          </Typography>
        </CardContent>
      </Card>
    );
  }
}

const App = withStyles(styles)(Demo);


ReactDOM.render(<App />, document.querySelector('#root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@3.9.2/umd/material-ui.production.min.js"></script>

<div id="root"></div>

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

2 个答案: