Not able to reduce the size of image in Material UI CardMedia in a React component

Question

I´m just not able to an image's heigh and width changed in Material-UI's CardMedia image: Below is my code.

 <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>

I have looked throuh this and this. But none of which resolved my problem.

Answer 1

You can skip CardMedia and write div with background or use image tag yourself inside CardActionArea.

Or correct your CardMedia props as here

Because CardMedia do not accept style prop

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

Answer 2

You can apply your styles with className props. Here is an example:

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/[email protected]/umd/material-ui.production.min.js"></script>

<div id="root"></div>