使用不同图像大小的Nextjs图像组件

Question

我正在尝试使用Next.js图像组件来处理所有具有唯一大小的图像。他们的榜样声明图像将延伸到父div宽度和高度。我试过包装它们，但不知道如何适应动态图像大小。我想有一个固定的宽度和高度来调整每一个比例。蒂娅。

这是我的代码(图像来自数组) --因为我没有高度设置，页面上没有任何渲染。如果我使用的是Tailwind的h-auto，它仍然不显示：

<div className="w-screen h-screen">
  {allImages.allImages.map((image, i) => {
    return (
      <div className="relative w-100 md:w-5/6 lg:w-7/12" key={image}>
        <Image priority src={`/${image}`} layout="fill" objectFit="cover" />
      </div>
  )})}
</div>

Answer 1

你可以在图像标签上使用这些道具，

<div className="div-class">
   <Image src={imageLink} layout="fill" objectFit="cover" />
</div>

并将Image标记包装在div中，如上面所示。现在，您可以使用媒体查询为div提供宽度和高度，图像将使用该空间。

Answer 2

我在这个文章中找到了一个解决方案，这个解决方案似乎很有效。

<div className={'image-container'}>
  <Image src={path} layout="fill" className={'image'} />
</div>

SCSS

.image-container {
  width: 100%;

  > div {
    position: unset !important;
  }

  .image {
    object-fit: contain;
    width: 100% !important;
    position: relative !important;
    height: unset !important;
  }
}

我将它包装在一个名为<ResponsiveImage />的组件中。您可以在包装器上尝试其他规则，如position: relative。