Next.js Image 自适应父元素(设置宽度为100%)

使用 Next.js 时，让 next/image 组件可以自适应父元素宽度(设置宽度为100%)的一种方法

发布于  星期四，三月 21 2024

环境

不同版本的 Next.js 中 next/image 组件的用法可能不一样，需要注意

  • Next.js 的版本: >= 13.3.0
  • 项目已安装 Tailwind CSS（不是必须）

具体实现

next/image 组件对加载图片做了很多优化，是个很好的组件。但是有个很不爽的点就是 next/image 组件一定要设置 width 和 height，而且 width 和 height 只能为设置数字类型的值。要想让图片自适应父元素或者设置宽度为 100% 是没法通过 width 和 height 配置来搞定的，只能通过比较 hack 的方法来实现。例如如下代码：


<!-- 安装了tailwind css时的写法 -->
<div className="max-w-lg lg:max-w-xl">
    <Image
      src="xxx"
      width={0}
      height={0}
      sizes="100vw"
      className="w-full h-auto"
    />
</div>

<!-- 普通写法 -->
<div style={{ width: 'xxx' }}>
    <Image
      src="xxx"
      width={0}
      height={0}
      sizes="100vw"
      style={{ width: '100%', height: 'auto' }}
    />
</div>

参考链接

  • Next.js