在Next.js中如何仅指定图片高度且自动保持宽高比？

该报错是旧版next/image组件的强制校验规则导致的：为了避免页面出现累积布局偏移（CLS），组件要求必须提前明确图片尺寸，要么传入width和height属性，要么设置layout="fill"让图片填充父级容器。

根据你使用的Next.js版本，可选择对应实现方案：

Next.js 13及以上版本（新版Image组件） #

13版本对next/image做了重构，原生支持仅指定单维度尺寸，自动按原始宽高比计算另一维度，只需显式将width设为auto即可：

import Image from 'next/image'

<Image
  src="/logo.png"
  alt="logo"
  height={30}
  width="auto"
/>

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

方法1：外层容器配合fill布局 #

给Image组件套一个相对定位的父容器，固定父容器高度，宽度自适应，再让图片填充父容器且按比例缩放即可：

import Image from 'next/image'

<div style={{ position: 'relative', height: '30px', width: 'fit-content' }}>
  <Image
    src="/logo.png"
    alt="logo"
    layout="fill"
    objectFit="contain"
  />
</div>

方法2：直接导入本地静态图片 #

如果你的图片是存放在项目内的静态资源，可以直接导入图片，Next.js会自动读取图片原始宽高，你只需要覆盖height属性即可，无需手动设置宽度：

import logo from '/public/logo.png'
import Image from 'next/image'

<Image
  src={logo}
  alt="logo"
  height={30}
/>

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