Full width Image issue.
EnderGnar opened this issue · 2 comments
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.
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.
Oh wow sorry should have just searched a little bit further in that thread.
Thank you :)