在Next.js中设置图片高度为500px时如何保持原图比例

Next.js Image 固定高度保留原始比例实现方案 #

你当前代码的问题在于使用layout="fixed"同时固定了宽高均为500px，无法适配图片原始比例。根据你使用的Next.js版本不同，对应解决方案如下：

适用版本：Next.js 12及更早 / Page Router 旧版next/image（支持layout属性）

将外层容器固定高度为500px，Image组件使用layout="fill"撑满父容器，配合objectFit: contain即可自动保留原始比例，高度固定为500px，宽度按比例自适应：

<div className='relative text-center h-[500px] w-full'>
  <Image
    layout="fill"
    objectFit="contain"
    loading="lazy"
    src={image.url}
    alt={image.name}
  />
</div>

注意父容器必须设置position: relative（对应你代码里的relative类），layout="fill"的Image组件默认是绝对定位，会基于最近的非static定位父元素撑满。

适用版本：Next.js 13+ App Router 新版next/image（已废弃layout属性）

新版组件用法更简单，直接固定高度为500，宽度属性传0后在style中设置width: auto即可：

<Image
  src={image.url}
  alt={image.name}
  height={500}
  width={0}
  style={{ width: "auto", objectFit: "contain" }}
  loading="lazy"
/>

新版Image要求必须显式传入width和height属性，此处传0仅为满足参数要求，实际宽度会按原始比例自适应。

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