Next.js 13 Image组件圆形图片变椭圆形问题求解

你遇到的椭圆问题主要来自三个核心原因：Next.js Image组件默认的比例保留机制、内边距/边框占用空间导致实际内容区宽高不等，或是图片本身并非正方形。以下是几种实用的解决方法：

方法一：容器包裹 + fill布局（推荐） #

这种方式最可控，能彻底规避比例适配问题：

{/* 父容器设置固定宽高、边框、内边距和圆角，必须设置relative */}
<div className="w-[100px] h-[100px] border border-gray-300 p-2 rounded-full relative">
  <Image
    src="/profile.jpg"
    fill
    className="object-cover rounded-full"
    alt="profile-pic"
  />
</div>

• 父容器的w-[100px] h-[100px]对应你原本设置的尺寸，内边距和边框直接加在父容器上，不会干扰图片的尺寸计算
• Image的fill属性会让它填满父容器，object-cover保证图片按比例裁剪适配正方形，不会拉伸变形
• 父容器和Image都添加rounded-full（或仅给父容器），确保最终显示为完整圆形

方法二：修改现有代码强制1:1比例 #

如果不想调整结构，直接给现有Image组件添加强制比例的样式：

<Image
  src="/profile.jpg"
  width={100}
  height={100}
  className="border border-gray-300 p-2 rounded-full aspect-square object-cover"
  alt="profile-pic"
/>

• aspect-square强制元素宽高比为1:1，覆盖Next.js Image默认的原始比例适配逻辑
• object-cover让图片按比例裁剪，填满正方形区域，避免因原始比例问题拉伸成椭圆
• 若图片本身是长方形，可通过object-position: center（或其他值）调整显示的核心区域

方法三：预处理图片为正方形 #

如果允许的话，先将profile.jpg处理成正方形图片，这样只要容器是正方形，无需额外样式就能直接显示圆形，减少样式层面的适配成本。

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