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%" }}
/>

<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%"

"100%"

"100%"

"100%" or something similar. How do I achieve this the best way possible without hard coding it?

Solution

Use fill property

kdiffin•9/29/24, 6:21 PM

Remove heigjt and width

Solution

kdiffin•9/29/24, 6:21 PM

Use fill property

kdiffin•9/29/24, 6:21 PM

And set the parent pisition to relative

kdiffin•9/29/24, 6:22 PM

Optionally using object-cover could be useful

filyysOP•9/29/24, 9:18 PM

I'll check into that, thanks

kdiffin•9/30/24, 2:31 PM

any luck?

filyysOP•9/30/24, 2:49 PM

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