Next/Image component does not work with height="auto"

[fariasmateuss]

Next/Image component does not work with height="auto". Why?

The image doesn't have a fixed height, but if I don't pass a value, it doesn't show up on screen. How can I resolve this?

[thibautsabot]

Hello.

You need to use the fill layout and a parent to do so.

When fill, the image will stretch both width and height to the dimensions of the parent element, provided the parent element is relative.
This is usually paired with the objectFit property.
Ensure the parent element has position: relative in their stylesheet.

See: https://nextjs.org/docs/api-reference/next/image#layout

[amritk]

What if you don't want it to fill? Just want the height to be auto and set the width?

[carloscuellarmedvana]

What if you don't want it to fill? Just want the height to be auto and set the width?

I come from 2025. The Next Image component still sucks

[Ivaylo-Korakov]

Yeah, this is still an issue....
If you have a parent div with a relative and height auto set, and then the Next Image component as a child with fill it doesn't work - the height stays at 0..

[Chaoses-Ib]

This solution from #18474 (comment) works for me:

<Image
  src="url"
  width={0}
  height={0}
  sizes="100vw"
  style={{ width: '100%', height: 'auto' }}
/>

[MatthieuBenierPisani]

Thank you so much 🙏

[ProgrammerAholic]

thank you bro, that solution worked!!!

[alexkanga]

Great solution !!! Works fine for me too !

[An1mus]

This is not logical, is it?
Is this part of the docs? If not - it should

[kikorp78]

Doesn't this basically negate all optimizations by Next? Maybe not when the image is actually taking up 100% of the viewport width, but I think that it does in all other cases.