TailwindCSS + Next.js 图像采用全高填充布局答案

【问题标题】：TailwindCSS + Next.js Image take full height with fill layoutTailwindCSS + Next.js 图像采用全高填充布局
【发布时间】：2021-05-16 09:04:53
【问题描述】：

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

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

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

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

如何自动确定其高度？

【问题讨论】：

标签： css next.js tailwind-css nextjs-image

【解决方案1】：

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

这是 DOM 上的 Image 组件，看有 2 个 div，里面放置了“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%;
}

【讨论】：