CODEWITHSUNDEEP
reactjsmaterial-ui
Rohan_Paul
Rohan_Paul

Reputation: 1512

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

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.

Upvotes: 2

Views: 17689

Answers (2)

mehamasum
mehamasum

Reputation: 5742

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>

Upvotes: 2

Raj D
Raj D

Reputation: 535

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"
 />`

Upvotes: 3

Related Questions