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

1 Answer 1

change from

objectFit: 'contain'

to

objectFit: 'cover',