Next.js 13中<Image/>组件尺寸设置无效，如何启用横向滚动？

问题原因 #

Next.js的Image组件默认优先响应式布局逻辑，直接设置width/height容易被内置规则覆盖；同时横向滚动容器的子元素默认会在flex布局下被压缩，导致图片尺寸无法按预期显示。

修复方案 #

1. 调整BodyParts组件的Image配置 #

针对Next.js版本差异，分别处理：

• Next.js 12及以下：添加layout="intrinsic"属性确保尺寸生效，配合objectFit维持图片比例
• Next.js 13+：通过style强制锁定尺寸，避免响应式规则干扰

修改后的BodyParts组件代码：

"use client";

import React from "react";
import Image from "next/image";

const BodyParts = () => {
  return (
    <Image
      className="inline-block p-2 cursor-pointer hover:scale-110 delay-100 transition duration-250 ease-in-out"
      src="/assets/gym.png"
      alt="hero banner"
      width={200}
      height={200}
      // Next.js 12及以下用这行
      layout="intrinsic"
      // Next.js 13+替换为这行
      // style={{ width: 200, height: 200 }}
      objectFit="cover"
    />
  );
};

export default BodyParts;

2. 修复横向滚动容器的子元素样式 #

给每个图片项的容器添加flex-shrink-0，禁止flex布局下的自动收缩，保证每个项保持固定宽度；同时移除无用的whitespace-nowrap（flex布局下该属性对块级元素无效）。

修改后的滚动容器代码：

<div className="relative items-center">
  <div
    id="slider"
    className="w-full h-full flex overflow-x-scroll scroll-smooth"
  >
    {data.map((item) => (
      <div
        key={item.id || item}
        itemID={item.id || item}
        title={item.id || item}
        className="flex-shrink-0"
      >
        <BodyParts
          item={item}
          bodyPart={bodyPart}
          setBodyPart={setBodyPart}
        />
      </div>
    ))}
  </div>
</div>

验证效果 #

调整后每个图片会保持200x200的固定尺寸，当容器宽度不足时，会自动激活横向滚动功能，鼠标悬停的缩放效果也能正常触发。

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