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?