search

Niels-IO / next-image-export-optimizer

Use Next.js advanced <Image/> component with the static export functionality. Optimizes all static images in an additional step after the Next.js static export.
MIT License
439 stars 52 forks source link

Full width Image issue. #178

Closed EnderGnar closed 11 months ago

EnderGnar commented 11 months ago

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 https://github.com/vercel/next.js/discussions/18474#discussioncomment-5501724.

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

Niels-IO commented 11 months ago

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.

EnderGnar commented 11 months ago

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

Thank you :)