CODEWITHSUNDEEP
cssreactjsnext.jstailwind-css
Sai Krishnadas
Sai Krishnadas

Reputation: 3409

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

Upvotes: 0

Views: 601

Answers (1)

Avner Israel
Avner Israel

Reputation: 175

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

Upvotes: 1

Related Questions