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

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

CodePudding user response：

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