Theo's Typesafe Cult•3mo ago

What's the best way of making a Next.js image component fit the parent size?

<Image
  src="/images/other-img-1.jpg"
  alt="Server image"
  width={0}
  height={0}
  style={{ width: "100%", height: "100%" }}
/>

<Image
  src="/images/other-img-1.jpg"
  alt="Server image"
  width={0}
  height={0}
  style={{ width: "100%", height: "100%" }}
/>

The width and height is necessary, though I can't set it to "100%" or something similar. How do I achieve this the best way possible without hard coding it?

Solution:

Use fill property

Jump to solution

6 Replies

kdiffin•3mo ago

Remove heigjt and width

Solution

kdiffin•3mo ago

Use fill property

kdiffin•3mo ago

And set the parent pisition to relative Optionally using object-cover could be useful

filyysOP•3mo ago

I'll check into that, thanks

kdiffin•3mo ago

any luck?

filyysOP•3mo ago

Yup, I had a few other issues in the meantime but I got it to work, thanks

Gaming

Programming

What's the best way of making a Next.js image component fit the parent size?