title: TailwindCSS + Next.js Image take full height with fill layout
body: <p>I'm trying to use the Next.js' <code>&lt;Image&gt;</code> component with the <code>layout=fill</code> option. Therefore I've created a <code>relative</code> <code>div</code> that contains the <code>Image</code> tag. But I'd like to determine the height by the Image height.</p>
  <p>Found <a href="https://stackoverflow.com/a/65134645/4132845">this example</a> but height is statically given there. So I've tried this based on the example.</p>
  <pre><code>&lt;div className=&quot;relative w-full h-full&quot;&gt;
    &lt;Image
      src={post.coverImage.url}
      layout=&quot;fill&quot;
      alt={post.title}
    /&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I've also tried <code>h-full</code> or <code>max-h-full</code> classes instead of <code>h-</code> tags but couldn't succeed.</p>
  <p>How can I make its height automatically determined?</p>