使 CardMedia 图像适合 MUI 5 中的内容

Question

我希望我的图像完全适合 CardMedia。然而，由于它们的高度和宽度不同，其中一些会被切割成这样：

此外，在调整大小时，一些图像也会被剪切：

这是 CardMedia 部分的代码：

   <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>

总的来说，我想实现这样的目标，但所有卡片的高度和宽度都相同：

有什么方法可以解决这个问题，还是需要单独调整每个图像的大小？

Answer 1

您需要使图片填充其布局，并保持其纵横比。最好的方法是将其“object-fit” CSS 属性设置为“contain”。尝试这个：

<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>

Answer 2

尝试这个

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

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