Image size error from light house.

[Elindo586]

Summary

For image sizing error... should I use the option fill? or can I specify width and height?

If I specify width and height I get an error.

If I do fill, it doesn't show the image, unless I give height and width to the div, and then it is not responsive..

Sample code on image I have is this:

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

             // width={700}
             // height={400}
           />
         </div>

And the related CSS is this:

.oil-analysis-span {
  padding-left: 2em;
  position: relative;
  background-color: blue;
  height: 400px;
  width: 700px;
}

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

Additional information

No response

Example

No response

[Elindo586]

To be fair, the image size error went away, but I get a huge image and a large content error for a big image...

[Elindo586]

This is the link with the page:
https://github.com/Elindo586/nextprojectb/blob/main/pages/services/fluid-analysis.js

And this is the associated CSS

.oil-analysis-span {
  padding-left: 2em;
  position: relative;
  object-fit: contain;
  object-position: center;
  /* height: 400px;
  width: 700px; */
}

#oil-analysis2 {
  height: auto;
  width: 50%;
  margin-right: 1em;
  /* object-fit: contain; */
}

To do the fill I used a

instead of

All the other items used for fill are commented //

And then I take out the width and height from the image to let the fill do the job... which pretty much does nothing..