I want my images to fully fit the CardMedia. Yet since they are of different heights and widths, some of them get cut like so:

Also upon resizing, some images get cut as well:

This is the code for the CardMedia part:

   <Card
      raised
      sx={{
        maxWidth: 280,
        margin: "0 auto",
        padding: "0.1em",
      }}
    >
      <CardMedia
        component="img"
        height="250"
        image={product.img_urls[0]}
        alt={product.name}
        title={product.name}
        sx={{ padding: "1em 1em 0 1em" }}
      />
      // Other Content
    </Card>

Overall, I want to achieve something like this but with all the cards in the same height and width:

Is there any way I can fix this or do I need to resize each image individually?

I want my images to fully fit the CardMedia. Yet since they are of different heights and widths, some of them get cut like so:

Also upon resizing, some images get cut as well:

This is the code for the CardMedia part:

   <Card
      raised
      sx={{
        maxWidth: 280,
        margin: "0 auto",
        padding: "0.1em",
      }}
    >
      <CardMedia
        component="img"
        height="250"
        image={product.img_urls[0]}
        alt={product.name}
        title={product.name}
        sx={{ padding: "1em 1em 0 1em" }}
      />
      // Other Content
    </Card>

Overall, I want to achieve something like this but with all the cards in the same height and width:

Is there any way I can fix this or do I need to resize each image individually?

• javascript
• html
• css
• reactjs
• material-ui

• Looks like a possible duplicate of stackoverflow.com/a/55272024 – Jack465 Commented May 12, 2022 at 9:11
• @Jack465I I had already checked that out to no avail. – Nima Zarei Commented May 12, 2022 at 9:21

2 Answers 2

You need to make your pictures to fill their layouts, AND keep their aspect ratio. The best way is to set their "object-fit" css property to "contain". Try this:

<Card
  raised
  sx={{
    maxWidth: 280,
    margin: "0 auto",
    padding: "0.1em",
  }}
>
  <CardMedia
    component="img"
    height="250"
    image={imageNetwork}
    alt={"alt"}
    title={"titleasdasdsada"}
    sx={{ padding: "1em 1em 0 1em", objectFit: "contain" }}
  />
  // Other Content
</Card>

Try this

parent-image-element {
 width: 100px;
}

image {
 width: 100%;
 max-height: 100px;
}