Trying to utilize the Next.js' <Image> component with the layout=fill setting, I created a relative div housing the Image tag. However, I am looking for a way to set the height based on the Image's height.
Came across this example, but the height is statically defined there. So, following that example, I attempted this script:
<div className="relative w-full h-full">
<Image
src={post.coverImage.url}
layout="fill"
alt={post.title}
/>
</div>
I also experimented with using h-full or max-h-full classes instead of the h- tags, but did not achieve success.
How can I dynamically determine the height of the image container?