NextJS Image组件如何设置宽度100%、高度自适应保持宽高比

安全阿岳

2026-10-4

旧版Next.js（12及更早/Pages Router引入的`next/image`）解法

你当前使用的layout="fill"属性要求父元素必须有明确的宽高，所以才会出现必须设置固定高度才能正常展示的问题，可改用layout="responsive"实现需求：

export default function PhotoCard({ img }: Props) {
  return (
    <div className="w-full my-2">
      <Image
        alt={img.title}
        src={img.url}
        // 填写图片的原始宽高数值（单位为像素，仅用于计算宽高比，不会限制最终渲染尺寸）
        width={1600}
        height={900}
        layout="responsive"
        objectFit="cover"
      />
    </div>
  );
}

如果不知道图片的原始宽高，可以用比例容器方案适配：

export default function PhotoCard({ img }: Props) {
  return (
    {/* 以16:9比例为例，padding-top值 = 高度/宽度*100%，4:3对应75%，1:1对应100% */}
    <div className="relative w-full h-0 pt-[56.25%] my-2">
      <Image
        alt={img.title}
        src={img.url}
        layout="fill"
        objectFit="cover"
      />
    </div>
  );
}

新版Next.js（13+ App Router引入的`next/image`）解法

新版已经移除了layout属性，直接通过样式和参数配置即可实现：

import Image from 'next/image'

export default function PhotoCard({ img }: Props) {
  return (
    <div className="w-full my-2">
      <Image
        alt={img.title}
        src={img.url}
        width={0}
        height={0}
        sizes="100vw"
        className="w-full h-auto"
        style={{ objectFit: 'cover' }}
      />
    </div>
  );
}