如何让图像填满我的轮播幻灯片

Question

我正在尝试将我的图片放入幻灯片中。

以下是我的示例代码和截图：

<div className="relative h-24 w-20 sm:h-44 sm:w-100 md:h-44 md:w-60 flex-shrink-0">
  <Carousel showThumbs={false}>
    {imgSrc?.map((url, index) => (
      <div className="h-24 w-20 sm:h-44 sm:w-100 md:h-44 md:w-60 flex-shrink-0" >
        <img class="object-fill rounded-md" src={`${url}`} />
      </div>
    ))}
  </Carousel>
</div>

我所做的是：

1. 将第一个块设置为固定大小。这是我希望每张图片都被限制到的尺寸。

2. Carousel 内部：因为<div> 和<img> 标签是这个库中的协议。所以我只是在关注它。

3. 确保所有内容都被限制在固定长度内。我为每个标签设置了相同的 CSS 规则。

结果是并非所有图像都显示相同的大小。有些有一些我不想看到的空白空间。

我可以知道如何解决它吗？这不是这个CSS的使用方式吗？

---

[用 Ed Lucas 的代码更新]

在 MD 设置中，缩略图中的所有图像都可以完美地放入框内。

但是，当屏幕缩小时，有些图像会突然缩小到小于缩略图，而有些图像仍然可以与框大小对齐。你有什么想法吗？

<div className="relative h-30 w-40 sm:h-44 sm:w-100 md:h-44 md:w-60 flex-shrink-0">
  <Carousel showThumbs={false}>
    {imgSrc?.map((url, index) => (
      <div className="h-30 w-40 sm:h-44 sm:w-100 md:h-44 md:w-60 flex-shrink-0" >
        <img class="object-cover h-full w-full rounded-md" src={`${url}`} />
      </div>
    ))}
  </Carousel>
</div>

这里是小屏幕尺寸的例子

正常：

异常图片

Answer 1

由于您在容器<div> 上设置宽度和高度，因此您可以使用具有100% 宽度和高度的object-fill。例如，如果您不介意图片被拉伸：

<img class="object-fill h-full w-full rounded-md" src={`${url}`} />

如果不想要拉伸的图片，可以试试object-cover：

<img class="object-cover h-full w-full rounded-md" src={`${url}`} />

Answer 2

您可以考虑在 CSS 中使用 object-fit 属性。 在顺风中找到相同的属性here