Next.js Discord

Discord Forum

Setting responsive dimensions on next/image component

Answered
Polar bear posted this in #help-forum
Open in Discord
Polar bearOP
Hi all - Ive been looking into this for a while and have come across a few others who are experiencing the same issue... Is it possible to allow next/image to fill its parent without explicitly setting width and height ?

In Next13, it looks as though the only way to achieve this is by setting width={300} height={300} ? This seems like a "hacky" solution...

Any suggestions ?

I have raised a discussion too - https://github.com/vercel/next.js/discussions/55731

Thanks 🖖
Answered by riský
so you are using sizes to abuse it (not the width and height)...
<Image
  src="url"
  width={0}
  height={0}
  sizes="100vw"
  style={{ width: '100%', height: 'auto' }} // optional
/>
View full answer

17 Replies

riský
can you use [fill](https://nextjs.org/docs/app/api-reference/components/image#fill)? (i haven't used next/image before btw), but otherwise it doesn't sound like you can do that much...
Polar bearOP
Yep, I have been using that and its in my code snippet on the discussion - I would assume using fill and setting min-height and min-width would allow the image take up the available space + if larger than the minimum than extend... but thats not the case 💔
riský
and if you set height to 100% in css? (i haven't seen it in your code)
Polar bearOP
no luck... setting 100% still only takes up the minimum available space
riský
and if you put the 100% on the image element (or is that where you you put it)
as i fell like this may be a css issue rather than next/image (but idk)
Polar bearOP
Same for both unfortunately... as soon as you specify an exact value, it works - but I dont understand why we would have to do that ? fill will take up 100% of the available space
riský
idk then, this seems like some weird issue then 😭
Polar bearOP
yeah very odd - it seems quite common as well: https://github.com/vercel/next.js/discussions/18474#discussioncomment-5501724
riský
and that didn't work for you 😭
wait setting both values to 0 = success... whatttt
Polar bearOP
exactly 🤯
riský
so you are using sizes to abuse it (not the width and height)...
<Image
  src="url"
  width={0}
  height={0}
  sizes="100vw"
  style={{ width: '100%', height: 'auto' }} // optional
/>
Answer
riský
and this "hacky" solution is the only 😭
Polar bearOP
and thats what Im hoping raising to the community either we confirm that is the only solution or we are missing something
riský
ngl that doesn't sound intended
i hope someone answers either one of you discussions with better news...