Image responsive doesn't seem to work.

[Elindo586]

Summary

Would anybody provide feedback on this?

ERROR:
The image covers the entire screen... and the div I have should only do no more than half the screen.

I updated to the latest Next.js version... and I am trying to fix a "not properly size image" from the Lighthouse.

Try a few things, but long story short... apparently Next.js offers a responsive image sizing, that might fix the image problem issue from the Lighthouse?

Next.js references I have are:
https://www.youtube.com/watch?v=IU_qq_c_lKA
https://nextjs.org/docs/pages/api-reference/components/image?utm_source=lighthouse&utm_medium=devtools#sizes
https://nextjs.org/docs/app/building-your-application/optimizing/images

My code:

<div className="col-md-6" lang="en">
          <div
            className="  row justify-content-center"
            style={{
              display: "flex",
              objectFit: "scale-down",
              objectPosition: "center",
            }}
          >
            <Image
              fill
              src="/images/maintenance-1.png"
              alt="maintenance lubrication"
              sizes="25vw"
              style={{ width: "100%", height: "100%" }}
            />
          </div>

          <div
            className="  row justify-content-center"
            style={{
              display: "flex",
              objectFit: "scale-down",
              objectPosition: "center",
            }}
          >
            <Image
              fill
              src="/images/oil-analysis2.png"
              alt="oil analysis sample"
              sizes="25vw"
              style={{ width: "100%", height: "100%" }}
            />
          </div>
        </div>
      </div>

Additional information

No response

Example

No response

[Elindo586]

The previous code I had before I didn't use fill, instead just gave height and width of the image, but the Lighthouse will give me error on delivering wrong size.

Another way to do it, would be to make a bunch of individual images, and then somehow (don't know how), have next/image present the proper size image..

But according to the next/image documentation there should be no problem on presenting the proper size image anyway..

[icyJoseph]

As per docs, https://nextjs.org/docs/pages/api-reference/components/image#fill:

The parent element must assign position: "relative", position: "fixed", or position: "absolute" style.

So, pretty much the parent indicates the dimensions to take over, and the image just "fills" into that container.

[Elindo586]

Hmmm..

I tried obsolute, relative, static, and sticky..

I I turn on Pesticide I can see there is some lines inside the divs... but the image isn't filling the divs..

What could be the reason it doesn't display?

<div className="col-md-6" lang="en">
          <div
            className="  row "
            style={{
              position: "relative",
              top: "1px",
              left: "1px",
              objectFit: "scale-down",
              objectPosition: "center",
            }}
          >
            <Image
              fill={true}
              src="/images/maintenance-1.png"
              alt="maintenance lubrication"
              sizes="100vw"
              style={{ width: "100%", height: "100%" }}
            />
          </div>

          <div
            className="  row "
            style={{
              position: "relative",
              top: "50px",
              left: "1px",

              objectFit: "scale-down",
              objectPosition: "center",
            }}
          >
            <Image
              fill={true}
              src="/images/oil-analysis2.png"
              alt="oil analysis sample"
              sizes="25vw"
              style={{ width: "100%", height: "100%" }}
            />
          </div>
        </div>

[Elindo586]

That showed the images, but too big to fit them both properly... continue on this tomorrow..

[Elindo586]

Something is weird...

I moved the styled onto the CSS file to keep it cleaner... and now the image blew up all over the screen again...

<div className="col-md-6 image" lang="en">
          <div className=" image row ">
            <Image
              fill={true}
              src="/images/maintenance-1.png"
              alt="maintenance lubrication"
              sizes="100vw"
              style={{ width: "100%", height: "100%" }}
            />
          </div>

          <div className=" image row ">
            <Image
              fill={true}
              src="/images/oil-analysis2.png"
              alt="oil analysis sample"
              sizes="25vw"
              style={{ width: "100%", height: "100%" }}
            />
          </div>
        </div>

and from the CSS file:

.image {
  position: "relative";
  top: "1px";
  left: "1px";
  object-fit: "scale-down";
  object-position: "center";
  display: block;
  height: 400px;
  width: 700px;
}

^^^ Apparently it does matter where I put the CSS... but I am not able to add height and width directly on the style in the wrapping div... so I transfer all the style onto the CSS file... and it gives me a different view...

[icyJoseph]

Link to repository, or code location?

[Elindo586]

The repo is this one... but NOT updated because the index.js is a bit screw up right now..
https://github.com/Elindo586/nextprojectb

Right now the CSS related to that piece of code (beside bootstrap) would be this:

}
.image1 {
  position: "relative";
  top: "1px";
  left: "1px";
  object-fit: "scale-down";
  object-position: "center";
  display: block;
  height: 400px;
  width: 700px;
}

And the old index code showing the images is below... but this code gives me image size error from light house

https://github.com/Elindo586/nextprojectb/blob/main/pages/index.js

The modification comes from line 116 and down from col-md-6

<div className="col-md-6 image" lang="en">
          <div className=" image row ">
            <Image
              fill={true}
              src="/images/maintenance-1.png"
              alt="maintenance lubrication"
              sizes="100vw"
              style={{ width: "100%", height: "100%" }}
            />
          </div>

          <div className=" image row ">
            <Image
              fill={true}
              src="/images/oil-analysis2.png"
              alt="oil analysis sample"
              sizes="25vw"
              style={{ width: "100%", height: "100%" }}
            />
          </div>
        </div>

[Elindo586]

OK...

New updates on repo:

This is the code that I am trying to make it work... from line 113 and down..
https://github.com/Elindo586/nextprojectb/blob/main/pages/index-2.js
^^^ This just gives me a big image all over the screen.

This is the old code, that apparently isn't showing the image size error from Lighthouse
Line 115
https://github.com/Elindo586/nextprojectb/blob/main/pages/index.js
^^^ This is a new made file which was named index.js, the original index.js became index-2.js

And this is another file using the very same structure as index.js, but this page for some reason is showing the image sizing error from the lighthouse.
Line 106
https://github.com/Elindo586/nextprojectb/blob/main/pages/services/fluid-analysis.js

It is weird that the old Image tag structure I had now works in the new index.js created page, but no on other pages with the same Image tag structure..

ALSO.... in a separate note, the carousel images are not showing properly across the screen, but the carousel is made with react-bootstrap and I am going to replace it with plain code instead, so those images will be re-uploaded...