Next.js 的 Image 组件怎么设置自定义宽高还不拉伸变形？

码农爱军提问于 2026-02-26 14:34:21 阅读 10

框架

我在用 Next.js 的 next/image 组件，想显示一张 300×200 的图片，但原图是 1920×1080 的。我设置了 width 和 height 为 300 和 200，结果图片被强行拉伸变形了，看起来很糊也很怪。

我试过加 layout="responsive" 或者 objectFit="cover"，但要么不起作用，要么报错说不能和某些属性一起用。到底该怎么正确设置才能保持比例又不拉伸？

import Image from 'next/image';

<Image
  src="/banner.jpg"
  width={300}
  height={200}
  alt="banner"
/>

Image优化全栈开发服务端渲染

我来解答赞 3 收藏

反馈

1 条解答

UX-柯言 Lv1

应该是你没理解 Next.js Image 组件的默认行为：它会根据 width 和 height 自动算比例，但不会自动裁剪或居中。
要么用 objectFit="cover" + fill 模式（注意不能同时指定 width height），要么用 layout="fixed" + objectFit + 手动加 style={{ objectFit: 'cover', objectPosition: 'center' }}。

正确写法是这样：

import Image from 'next/image';



<Image

  src="/banner.jpg"

  width={300}

  height={200}

  alt="banner"

  style={{ objectFit: 'cover', objectPosition: 'center' }}

  priority

/>

注意：只要用了 width height 就默认是 fixed 布局，fill 模式会忽略它们，别混用。
另外确保你没在 next.config.js 里错误配置了 images.domains 或 loader，否则也可能导致图片被强制缩放。

2026-02-26 15:02