为何next/image组件与原生img元素显示尺寸存在差异？

问题现象 #

使用next/image组件和原生<img>元素加载同一图片资源，外层容器应用了相同的Tailwind CSS flex样式，但next/image渲染的图片明显被缩小，原生<img>则保持正常尺寸。

效果对比 #

• next/image组件渲染的图片：
  
• 原生img元素渲染的图片：
  

相关代码 #

export default function Home() {
  return (
    <div className="flex">
      <Image src={appleImage} alt="apple" priority />
      <Image src="/apple.png" width={600} height={840} alt="apple" />
      <img src="/apple.png" alt="apple" />
      <img src="/apple.png" width={600} height={840} alt="apple" />
    </div>
  );
}

*外层容器的flex类对应样式：

.flex {
    display: flex;
}

原因分析 #

Next.js的Image组件自带默认样式和尺寸约束逻辑，和原生<img>的行为有本质区别：

1. 默认样式差异
   next/image组件会自动为包裹图片的容器添加max-width: 100%和height: auto样式，内部img元素会被设置为width: 100%; height: 100%; object-fit: cover;这类适配规则，导致图片在flex容器中自动收缩以适应可用空间。而原生<img>无额外约束时，要么用图片原始尺寸，要么遵循设置的width/height属性，不会自动添加收缩逻辑。

2. 尺寸处理逻辑
   给next/image设置的width和height属性，主要用于Next.js生成适配不同屏幕的图片变体，而非直接作为渲染时的固定尺寸。在flex布局中，组件依然优先遵循自身的响应式收缩规则；而原生<img>的width/height属性会直接作为元素渲染尺寸（除非被CSS覆盖）。

3. flex布局默认行为差异
   在flex容器中，next/image的容器元素默认flex-shrink: 1（允许收缩），flex-basis会被自动计算为较小值，导致图片被压缩；原生<img>默认以自身尺寸作为flex-basis，未设置flex-shrink时不会轻易收缩。

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