Full width Image issue.

[Yannik Wyss]

There is a new pattern needed when using an <Image> with non pixel defined width. It would look something like this:

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

from vercel/next.js#18474 (comment).

In debug mode this does not work because width is not defined, maybe some undefined checks that are a little to weak.

[Niels]

Hi @EnderGnar,

The solution to a full-with image without a specified width value is to use the fill property.

A boolean that causes the image to fill the parent element, which is useful when the width and height are unknown.
The parent element must assign position: "relative", position: "fixed", or position: "absolute" style.

Then you can give the parent a width:100% or whatever may be suitable in the specific situation.

Your quoted solution seem like a hack that should not be encouraged.

[Yannik Wyss]

Oh wow sorry should have just searched a little bit further in that thread.

Thank you :)