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:

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

Leave a Reply