I am building a demo of a website selling games. My images due to their heights and widths aren't fitting uniformly to CardMedia.

So in the first row they don't have any padding top and in the second row all but one do. Also they have different sizes.

I tried using objectFit but it didn't help.

My markup:

  return (
    <>
      <Card
        elevation={3}
        sx={{
          width: 280,
          borderRadius: 3,
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-evenly',
        }}
      >
        <CardMedia
          component='img'
          sx={{height: 280, backgroundSize: 'cover' , objectFit: 'contain', width: '100%'}}
          image={game.pictureUrl}
          title={game.name}
        />
        <CardContent>
           {/* other markup */}
        </CardContent>

        <CardActions>
          <Button>Details</Button>
        </CardActions>
      </Card>
    </>
  );

I am building a demo of a website selling games. My images due to their heights and widths aren't fitting uniformly to CardMedia.

So in the first row they don't have any padding top and in the second row all but one do. Also they have different sizes.

I tried using objectFit but it didn't help.

My markup:

  return (
    <>
      <Card
        elevation={3}
        sx={{
          width: 280,
          borderRadius: 3,
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-evenly',
        }}
      >
        <CardMedia
          component='img'
          sx={{height: 280, backgroundSize: 'cover' , objectFit: 'contain', width: '100%'}}
          image={game.pictureUrl}
          title={game.name}
        />
        <CardContent>
           {/* other markup */}
        </CardContent>

        <CardActions>
          <Button>Details</Button>
        </CardActions>
      </Card>
    </>
  );

• reactjs
• material-ui

Share Improve this question Follow asked Mar 31 at 17:18 X HOxhaX HOxha 17711 gold badge33 silver badges1212 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

change from

objectFit: 'contain'

to

objectFit: 'cover',