如何在Next.js 15中创建每行固定高度的图片网格？

需求说明 #

要创建一个图片网格，满足以下要求：

• 每行高度固定
• 图片占满容器100%宽度
• 图片仅为4:3（横向）或9:16（纵向）比例，禁止裁剪隐藏
• 期望效果参考：
  

当前代码 #

组件代码 #

import Image from 'next/image';
import styles from '@/components/collage.module.css';

const images = [
  { src: '/images/vertical1.jpg', alt: 'Vertical Image 1', orientation: 'vertical' },
  { src: '/images/horizontal1.jpg', alt: 'Horizontal Image 1', orientation: 'horizontal' },
  { src: '/images/vertical2.jpg', alt: 'Vertical Image 2', orientation: 'vertical' },
  { src: '/images/horizontal2.jpg', alt: 'Horizontal Image 2', orientation: 'horizontal' },
  { src: '/images/horizontal2.jpg', alt: 'Horizontal Image 2', orientation: 'horizontal' },
  { src: '/images/vertical2.jpg', alt: 'Vertical Image 2', orientation: 'vertical' },
  { src: '/images/vertical2.jpg', alt: 'Vertical Image 2', orientation: 'vertical' },
];

const Collage: React.FC = () => {
  return (
    <div className={styles.collageGrid}>
      {images.map((image, index) => (
        <div
          key={index}
          className={`${styles.imageWrapper} ${image.orientation === 'vertical' ? styles.vertical : styles.horizontal}`}
        >
          <Image
            src={image.src}
            alt={image.alt}
            layout="responsive"
            width={1}
            height={1}
            className={styles.image}
          />
        </div>
      ))}
    </div>
  );
};

export default Collage;

CSS代码 #

.collageGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px; /* Adjust as needed for even spacing */
    padding: 50px;
  }
  
  .imageWrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  
  .vertical {
    grid-row: span 2; /* Vertical images span two rows */
  }
  
  .horizontal {
    height: 100%; /* Horizontal images fit within a single row */
  }
  
  .image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

问题分析 #

当前代码的核心问题：

1. 未设置固定网格行高，纵向图片的高度没有统一基准，导致布局混乱
2. Next.js 15中layout="responsive"已被废弃，且width={1}/height={1}会破坏图片原有比例
3. object-fit: cover会强制裁剪图片，不符合“不隐藏裁剪”的要求
4. overflow: hidden会进一步隐藏图片超出容器的部分

修正方案 #

1. 调整CSS：固定行高+明确宽高比 #

修改collage.module.css，固定每行高度，用aspect-ratio保证图片比例，同时移除裁剪相关设置：

.collageGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 240px; /* 固定每行基础高度，可按需调整 */
  gap: 20px;
  padding: 20px;
}

.imageWrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.vertical {
  grid-row: span 2; /* 纵向图片占2行，总高度为2*240px=480px */
  aspect-ratio: 9/16; /* 强制纵向图片宽高比为9:16 */
}

.horizontal {
  aspect-ratio: 4/3; /* 强制横向图片宽高比为4:3 */
}

.image {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保证图片完整显示，不裁剪 */
  background-color: #f5f5f5; /* 可选：给图片空白区域添加背景色 */
}

2. 调整组件代码：适配Next.js 15 Image组件 #

Next.js 15推荐使用fill属性替代旧的layout配置，确保图片正确填充容器：

import Image from 'next/image';
import styles from '@/components/collage.module.css';

const images = [
  { src: '/images/vertical1.jpg', alt: '纵向图片1', orientation: 'vertical' },
  { src: '/images/horizontal1.jpg', alt: '横向图片1', orientation: 'horizontal' },
  { src: '/images/vertical2.jpg', alt: '纵向图片2', orientation: 'vertical' },
  { src: '/images/horizontal2.jpg', alt: '横向图片2', orientation: 'horizontal' },
  { src: '/images/horizontal2.jpg', alt: '横向图片2', orientation: 'horizontal' },
  { src: '/images/vertical2.jpg', alt: '纵向图片2', orientation: 'vertical' },
  { src: '/images/vertical2.jpg', alt: '纵向图片2', orientation: 'vertical' },
];

const Collage: React.FC = () => {
  return (
    <div className={styles.collageGrid}>
      {images.map((image, index) => (
        <div
          key={index}
          className={`${styles.imageWrapper} ${image.orientation === 'vertical' ? styles.vertical : styles.horizontal}`}
        >
          <Image
            src={image.src}
            alt={image.alt}
            fill
            className={styles.image}
            sizes="(max-width: 768px) 100vw, 50vw"
            priority={index < 3} // 可选：优先加载前3张图片提升性能
          />
        </div>
      ))}
    </div>
  );
};

export default Collage;

关键调整说明 #

• grid-auto-rows固定每行基础高度，纵向图片通过grid-row: span 2占据两行，配合aspect-ratio保证9:16的比例
• 使用object-fit: contain替代cover，确保图片完整显示，不会被裁剪
• Next.js Image改用fill属性，让图片自动填充容器，同时通过sizes属性优化响应式加载
• 移除overflow: hidden，避免隐藏图片的任何部分

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