使用Next.js Image组件时无法通过Tailwind CSS类设置宽高的问题

针对Next.js 13及以上版本（默认使用新版Image组件） #

新版Image组件已经废弃了旧的layout属性，你只需要显式传入width和height属性（值可以任意填，这里填0即可绕过固定尺寸限制），就可以直接通过Tailwind CSS类控制图片宽高，示例代码如下：

<Image
  src={imageSrc}
  alt={name}
  width={0}
  height={0}
  className="w-auto h-6 lg:block object-cover object-center"
  sizes="100vw"
/>

sizes属性可选，用于帮助Next.js更精准地选择合适分辨率的图片加载，优化性能。

针对Next.js 12及更早版本（使用旧版Image组件） #

你可以继续使用layout="fill"属性，只需要在外层嵌套一个相对定位的父容器，将你需要的宽高Tailwind类写在父容器上即可，示例代码如下：

<div className="relative w-auto h-6 lg:block">
  <Image
    src={imageSrc}
    alt={name}
    className="object-cover object-center"
    layout="fill"
  />
</div>

fill模式下Image会默认撑满整个父容器的尺寸，相当于用父容器的尺寸间接控制图片尺寸，完全兼容Tailwind的工具类写法。

注意事项 #

• 如果你需要保留图片原生比例，只需要在className中指定高度或宽度其中一项为固定值，另一项设为auto即可自动适配。
• 使用fill模式时父容器必须设置relative定位，否则图片会相对于整个页面视口定位，导致布局错乱。

内容的提问来源于stack exchange，提问作者Harsha M V