Next.js 13中如何让不同尺寸图片在网格中保持统一宽高？

问题原因 #

Next.js 13 中 App Router 下的 next/image 组件行为发生了变化：原有的 width 和 height 属性不再直接控制图片的显示尺寸，而是作为宽高比的参考值，默认采用响应式填充布局，导致原有固定尺寸的写法失效，图片布局混乱。

解决方案 #

方案一：适配 App Router 新 Image 组件（推荐） #

通过父容器控制尺寸，配合 fill 属性让图片填充容器：

<div
  key={title}
  className="flex flex-col rounded-lg shadow-lg overflow-hidden"
>
  <div className="flex-shrink-0 relative w-full h-[300px]">
    <Image
      className="object-cover"
      fill
      src={cover_image}
      alt={title}
      sizes="100vw"
    />
  </div>
</div>

或者用宽高比替代固定高度（更适配响应式场景）：

<div
  key={title}
  className="flex flex-col rounded-lg shadow-lg overflow-hidden"
>
  <div className="flex-shrink-0 relative w-full aspect-[2/1]">
    <Image
      className="object-cover"
      fill
      src={cover_image}
      alt={title}
      sizes="100vw"
    />
  </div>
</div>

关键修改点：

• 给包裹 Image 的父容器添加 relative 类，设置固定宽高或宽高比（aspect-[2/1] 对应原宽600、高300的比例）
• Image 组件添加 fill 属性，使其填充整个父容器
• 保留 object-cover 确保图片比例不变，避免拉伸变形

方案二：继续使用旧版 Image 组件（兼容写法） #

如果想沿用 Next.js 12 的写法，可以导入旧版组件：

// 注意导入路径改为 next/legacy/image
import Image from 'next/legacy/image';

// 原有代码无需大幅修改
<div
  key={title}
  className="flex flex-col rounded-lg shadow-lg overflow-hidden"
>
  <div className="flex-shrink-0">
    <Image
      className="w-full object-cover"
      height={300}
      width={600}
      src={cover_image}
      alt={title}
    />
  </div>
</div>

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