如何让Next.js Image组件填满父容器宽度且自适应高度保持比例？

layout="fill"模式下图片会以绝对定位脱离文档流，父容器无法感知图片实际高度，这是设置h-max后区域空白的根本原因。根据使用的Next.js版本选择对应实现即可：

Next.js 13+ 新版Image组件（推荐） #

新版组件移除了旧的layout属性，无需给父元素设置相对定位或固定高度，直接通过样式控制图片宽度占满容器，高度自动适配原始比例：

<div className='flex flex-row p-4 border w-full gap-4'>
  <div className='w-1/2 border'>
    <Image 
      src={src} 
      alt="左侧图片"
      width={0}
      height={0}
      sizes="50vw"
      className="w-full h-auto"
    />
  </div>
  <div className='w-1/2 border'>
    <Image 
      src={src} 
      alt="右侧图片"
      width={0}
      height={0}
      sizes="50vw"
      className="w-full h-auto"
    />
  </div>
</div>

注意：

• 本地导入的图片组件会自动读取原始尺寸，无需额外配置；远程图片需要提前在next.config.js的remotePatterns中添加对应域名白名单。
• sizes属性值写50vw即可，因为单张图片占屏幕一半宽度，能优化图片加载时的尺寸选择。

如果两张图片原始比例不一致，需要让两个容器高度统一、图片不变形，可以给图片容器设置固定宽高比，配合object-fit: contain实现：

<div className='w-1/2 border relative aspect-[4/3]'>
  <Image 
    src={src} 
    alt="左侧图片"
    fill
    className="object-contain p-2"
  />
</div>

其中aspect-[4/3]是Tailwind内置的宽高比工具类，可替换为你需要的比例值。

Next.js 12及更早旧版本 #

旧版本不要使用layout="fill"，改用layout="responsive"模式即可。该模式下图片会自动填满父容器宽度，高度按原始比例自适应，同时会撑开父容器高度，不会出现空白问题：

<div className='flex flex-row p-4 border w-full gap-4'>
  <div className='w-1/2 border'>
    <Image 
      src={src} 
      alt="左侧图片"
      layout="responsive"
      width={图片原始宽度数值}
      height={图片原始高度数值}
    />
  </div>
  <div className='w-1/2 border'>
    <Image 
      src={src} 
      alt="右侧图片"
      layout="responsive"
      width={图片原始宽度数值}
      height={图片原始高度数值}
    />
  </div>
</div>

旧版本layout="responsive"要求必须传入图片原始的width和height值，仅用于计算渲染比例，不会固定图片实际显示尺寸。

• 原有代码中给图片父容器加h-screen会强制容器高度等于屏幕高度，图片会被拉伸或裁剪，实现自适应高度时不需要给图片父容器添加任何固定高度类。
• 两个并排容器之间建议用gap-*类设置间距，比手动调整内边距更稳定，不会撑破容器宽度计算。

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