如何按高度调整Next.js中Image组件的尺寸

AI 小北

2026-10-7

Next.js Image 组件统一不同宽高比图片高度的实现方案

核心实现逻辑

外层容器设置你需要的统一目标高度，若需要横向排列多张图片，添加弹性布局属性保证对齐
每张图片单独套一个相对定位的父容器，高度继承外层容器的100%，宽度自适应
Image组件开启填充模式，设置object-fit属性保证图片按原始比例适配，不变形

代码示例

样式代码

/* 外层图片容器 */
.gallery-wrapper {
  height: 300px; /* 此处修改为你需要的统一高度 */
  display: flex;
  gap: 16px;
  align-items: center;
}

/* 单张图片的父容器 */
.image-item-wrap {
  position: relative;
  height: 100%;
  width: auto;
}

组件代码（Next.js 13+ App Router 版本）

import Image from 'next/image'

// 示例服务端返回的图片数据
const serverImages = [
  { id: 1, url: "/pic1.jpg", alt: "示例图1" },
  { id: 2, url: "/pic2.jpg", alt: "示例图2" },
  { id: 3, url: "/pic3.jpg", alt: "示例图3" },
]

export default function UniformHeightGallery() {
  return (
    <div className="gallery-wrapper">
      {serverImages.map(img => (
        <div key={img.id} className="image-item-wrap">
          <Image
            src={img.url}
            alt={img.alt}
            fill
            style={{
              objectFit: "contain"
            }}
          />
        </div>
      ))}
    </div>
  )
}