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

Question

I'm trying to use the Next.js' <Image> component with the layout=fill option. Therefore I've created a relative div that contains the Image tag. But I'd like to determine the height by the Image height.

Found this example but height is statically given there. So I've tried this based on the example.

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

I've also tried h-full or max-h-full classes instead of h- tags but couldn't succeed.

How can I make its height automatically determined?

score 1 · Accepted Answer · answered Nov 10 '21 at 18:16

I had the same issue and figured it out after inspecting the element. The problem is how Image component takes place in DOM.

This the Image component on DOM, look there are 2 divs and inside "img" is placed. So you have to target the outer div that wraps 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>

and in css:

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

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

1 Answers1