Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

couldn't reduce the size of image in next/image component

The image size isn’t changing at all.
Have tried giving width and height in the component and also tried to style using className.

The image size changes only when using normal tag.

Code:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

function Header() {
  const src = "https://links.papareact.com/qd3";
  return (
    <header>
      <div>
        <Image
          className="w-10 h-10"
          loader={() => src}
          src={src}
          layout="fill"
          objectFit="contain"
          objectPosition="left"
        />
      </div>
    </header>
  );
}

Have also tried using width and height :

           <Image
              loader={() => src}
              src={src}
              width="100px" //also tried width={100}
              height="100px" //also tried height={100}
              layout="fill"
              objectFit="contain"
              objectPosition="left"
            />

CodeSandbox link : https://codesandbox.io/s/cave-frmr6?file=/components/Header.js

>Solution :

In your example, in the sandbox, you are using
layout="fill"

This will overwrite your size properties to fill the entire parent.
Remove that property and see that your width and height options are accepted.

https://codesandbox.io/s/cave-forked-egtko?file=/components/Header.js

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading