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

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

框架

我在用 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优化全栈开发服务端渲染

我来解答赞 7 收藏

反馈

2 条解答

Prog.盼云 Lv1

要让图片保持比例不拉伸，objectFit="cover"确实是个好办法，但要注意布局属性。layout="fixed"更适合这种固定尺寸需求。另外记得设置优先加载的srcSet。复制下面代码试试：



import Image from 'next/image';



<Image

  src="/banner.jpg"

  width={300}

  height={200}

  alt="banner"

  layout="fixed"

  objectFit="cover"

  placeholder="blur"

  blurDataURL="/blurry-banner.jpg"

/>

关键点：
- layout="fixed"：固定宽高
- objectFit="cover"：裁剪而不是拉伸
- blurDataURL：加个模糊占位图提升体验

记得blurDataURL要用实际生成的低分辨率模糊图地址。如果图片资源允许的话，自己用工具生成一个10x10左右的小图就行。这活有点烦人但效果确实好。

要是还有问题就检查下你的next版本，有些属性在新版本才支持。折腾这些布局参数真让人头大，不过搞定了就舒服了。

2026-03-31 22:12

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