使用next/image组件时无法调整图片大小应如何解决？

你在代码中设置了layout="fill"属性，该属性的作用是让next/image组件完全忽略显式传入的width、height属性，自身尺寸会强制匹配最近的定位父元素的宽高，所以你直接给Image组件加className、传宽高属性的操作自然不会生效。

• 方案1：保留layout="fill"，给Image的父容器设置对应尺寸和定位
  layout="fill"属性对应的Image组件默认是绝对定位，你需要给外层父元素添加相对定位，同时设置你需要的宽高即可，示例代码：

function Header() {
  const src = "https://links.papareact.com/qd3";
  return (
    <header>
      {/* 给父div设置宽高和相对定位 */}
      <div className="relative w-10 h-10">
        <Image
          loader={() => src}
          src={src}
          layout="fill"
          objectFit="contain"
          objectPosition="left"
        />
      </div>
    </header>
  );
}

• 方案2：移除layout="fill"属性，直接控制Image组件尺寸
  去掉layout="fill"后，你传入的宽高属性、className的尺寸规则都会正常生效，示例代码：

<Image
  loader={() => src}
  src={src}
  className="w-10 h-10"
  width={100}
  height={100}
  objectFit="contain"
  objectPosition="left"
/>

如果你使用的是Next.js 13+的App Router版本，layout属性已经被废弃，将layout="fill"替换为fill属性即可，上述适配逻辑完全通用。

内容的提问来源于stack exchange，提问作者Sai Krishnadas