无法减小下一个/图像组件中的图像大小答案

【问题标题】：couldn't reduce the size of image in next/image component无法减小下一个/图像组件中的图像大小
【发布时间】：2021-12-27 06:53:30
【问题描述】：

图像大小根本没有变化。尝试在组件中指定宽度和高度，并尝试使用 className 设置样式。

只有在使用普通标签时图像大小才会改变。

代码：

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>
  );
}

也尝试过使用宽度和高度：

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

代码沙盒链接：https://codesandbox.io/s/cave-frmr6?file=/components/Header.js

【问题讨论】：

标签： css reactjs next.js tailwind-css

【解决方案1】：

在您的示例中，在沙箱中，您正在使用 layout="fill"

这将覆盖您的尺寸属性以填充整个父级。删除该属性并查看您的宽度和高度选项是否被接受。

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

【讨论】：