如何用Next.js实现Airbnb式正方形响应式图片网格？

架构老林

2026-8-9

解决Next.js Image实现响应式正方形图片网格的问题

要实现类似Airbnb的正方形图片网格，核心是让图片容器强制保持1:1的宽高比，再让Image组件填充整个容器并裁剪图片维持比例。你之前的问题在于layout="responsive"是基于设置的宽高比例自适应，但父容器没有强制正方形的约束，导致图片按原始尺寸比例显示。

以下是具体解决方案：

方案1：使用Tailwind CSS的`aspect-square`（推荐，Tailwind v3+）

利用Tailwind内置的宽高比类快速创建正方形容器，配合Next.js Image的fill布局让图片填满容器：

<div className="relative aspect-square -z-10">
  <Image
    src="/profile.webp"
    fill
    objectFit="cover"
    alt="用户头像"
  />
</div>

方案2：手动设置容器宽高比（无Tailwind或旧版本）

通过padding-top: 100%让容器高度等于宽度（相对于父容器宽度），形成正方形：

<div className="relative w-full -z-10" style={{ paddingTop: '100%' }}>
  <Image
    src="/profile.webp"
    fill
    objectFit="cover"
    alt="用户头像"
  />
</div>

针对Next.js 12及以下版本的兼容写法

如果使用旧版Next.js，需要用layout="fill"替代fill属性，同时清空width和height的固定值：

<div className="relative aspect-square -z-10">
  <Image
    src="/profile.webp"
    layout="fill"
    objectFit="cover"
    alt="用户头像"
    width={undefined}
    height={undefined}
  />
</div>