I have a situation where I am trying to set the height of an image within a container div to be equal to 100% of the container's height, while allowing the width of the container to adjust based on the image's aspect ratio. When using a standard img tag, this setup works perfectly fine. However, when using the Image component from Next.js, the image ends up with a width of 0px. It seems that Next.js requires a fixed width for the container. How can I achieve the desired outcome?
This is what I currently have:
Styling for the div:
div {
height: 50px;
width: auto;
}
Code for the Image component:
<Image src="..." alt="..." layout="fill" />