Fill property for Next Image doesn't seem to work. about next.js HOT 6 OPEN

.oil-analysis-span {
  padding-left: 2em;
  position: relative;
  height: 400px; /* Ensure the parent container has a defined height */
}

#oil-analysis2 {
  object-fit: contain;
  object-position: center;
  margin-right: 1em;
}

and then the updated JSX may look:

<div className="col-md-9">
  <div className="oil-analysis-span">
    <Image
      fill={true}
      id="oil-analysis2"
      src="/images/oil-analysis2.png"
      alt="oil-analysis"
      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
    />
  </div>
</div>

from next.js.

@Elindo586 If you do fill I don't think you should specify the width and height since it'll fill?

Also, you may wanna specify width and height for the .oil-analysis-span element so the Image component knows how much to fill.

from next.js.

+1

When using layout="fill" with the next/legacy/image tag

<Image src="/images/birds.svg" alt="birds" layout="fill" />

the build fails on this error

ReferenceError: Cannot access 'd' before initialization

Next >=14.1.1
does not reproduce on 14.0.1

from next.js.

@Elindo586 If you do fill I don't think you should specify the width and height since it'll fill?

Also, you may wanna specify width and height for the .oil-analysis-span element so the Image component knows how much to fill.

Yes.
width and height properties are optional, depending on two scenarios:

• fill property is true
• the image is imported via a static import

from next.js.

height: 400px; /* Ensure the parent container has a defined height */

^^^ Well, that made the trick.

I previously gave the parent div height and width, and the image wouldn't shrink to be responsive, but giving the parent div just the value of height did the job.

I didn't see it in the literature, or missed it, and of course I just plain didn't know I must give it the parent div a size value.

Thank you much!

from next.js.

WAIT!!!

So, if you give the parent div a size for the height, it sure looks like the image is being responsive, but the div itself doesn't change height for smaller screens, so you end up with big spaces being used by the div even when the image gets smaller.

Usually, the the div and the image get smaller as you have smaller screens.

For this to work I have to do media queries to adjust the height of the parent div, which is not something I would have done before if I just specify the size of the image, but still better than providing a bunch of images to fix the wrong image size error from Google lighthouse.

Unfortunately, the technology to have a true responsive image doesn't seem to be there with the fill property..... and so far the fill property seems the only way to not get the image size error from the lighthouse.

from next.js.