css - TailwindCSS + Next.js 图像采用全高填充布局

Question

我正在尝试将 Next.js<Image>组件与该layout=fill选项一起使用。因此我创建了一个relative div包含Image标签的。但我想通过图像高度来确定高度。

找到了这个例子，但高度是在那里静态给出的。因此，我根据示例进行了尝试。

<div className="relative w-full h-full">
  <Image
    src={post.coverImage.url}
    layout="fill"
    alt={post.title}
  />
</div>

我也尝试过h-fullormax-h-full类而不是h-标签，但没有成功。

如何自动确定其高度？

Answer 1

我有同样的问题，并在检查元素后发现了它。问题是Image组件在 DOM 中是如何发生的。

这是 DOM 上的 Image 组件，看有 2 个 div，里面放置了“img”。因此，您必须针对包装的外部 div img。

// I add img-wrapper class
<div className="relative w-full h-full   img-wrapper">
  <Image
    src={post.coverImage.url}
    layout="responsive"
    alt={post.title}
  />
</div>

在 CSS 中：

// targeting the first div
.img-wrapper > div {
 // this will take full-height, u can adjust it
  height: 100%;
}