3

我正在尝试将 Next.js Image 组件与所有具有唯一尺寸的图像一起使用。他们的示例说明图像将拉伸到父 div 的宽度和高度。我试过包装它们,但不知道如何适应动态图像尺寸。我想有一个设定的宽度和高度来调整每个相应的比例。TIA。

这是我的代码(图像来自一个数组)——因为我没有设置高度,所以页面上没有任何内容。如果我使用 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>
4

0 回答 0