TailwindCSS + Next.js 图片采用全高填充布局

Question

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

找到但高度是静态给出的。所以我已经根据示例进行了尝试。

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

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

如何让它的高度自动确定？

Answer 1

我遇到了同样的问题，并在检查元素后弄明白了。问题是 Image 组件如何在 DOM 中发生。

这是 DOM 上的图像组件，看有 2 个 divs 并且里面放置了“img”。所以你必须瞄准包裹 img.

的外部 div

// 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%;
}

TailwindCSS + Next.js 图片采用全高填充布局

TailwindCSS + Next.js Image take full height with fill layout

css

next.js

tailwind-css

nextjs-image