Next.js Image组件图片未裁切，如何实现图片嵌入自定义相框？

你的问题核心是没有把内嵌图片放在相框的裁切容器内部，导致overflow:hidden无法生效。下面是修改后的代码，直接就能实现图片内嵌相框的效果：

修改后的代码（Next.js 13+ 写法） #

<>
  <div className="flex justify-center items-center">
    {/* 相框容器：负责裁切内部图片 */}
    <div className="relative h-[640px] w-[460px] overflow-hidden">
      {/* 内嵌的图片：放在容器最底层，超出部分被裁切 */}
      <Image
        className="absolute inset-0 object-cover z-10"
        alt="月亮图片"
        src="/Moon.png"
        fill // 让图片填充整个容器
        priority // 可选，优先加载内嵌图
      />
      {/* 相框图片：放在最上层，显示相框效果 */}
      <Image
        className="w-full h-full z-20"
        alt="自定义相框"
        src="/frame.png"
        width={460}
        height={640}
        priority // 可选，优先加载相框
      />
    </div>
  </div>
</>

关键修改点说明 #

• 把内嵌的Moon.png放到相框的容器div内部，这样容器的overflow:hidden才能裁切超出的图片部分
• 内嵌图片使用fill属性（Next.js 13+）+ absolute inset-0，让它完全填充容器，配合object-cover保证图片比例不变且填满区域
• 相框图片设置更高的z-index（z-20），确保它显示在内嵌图片的上方
• 相框容器的宽高h-[640px] w-[460px]要和你制作的frame.png实际尺寸一致，保证裁切区域精准匹配相框的镂空部分

如果用Next.js 12及更早版本 #

把内嵌图片的fill换成layout="fill"，代码调整如下：

<>
  <div className="flex justify-center items-center">
    <div className="relative h-[640px] w-[460px] overflow-hidden">
      <Image
        className="absolute object-cover z-10"
        alt="月亮图片"
        src="/Moon.png"
        layout="fill"
        objectFit="cover"
      />
      <Image
        className="w-full h-full z-20"
        alt="自定义相框"
        src="/frame.png"
        width={460}
        height={640}
      />
    </div>
  </div>
</>

这样修改后，内嵌图片就会被相框容器裁切，刚好显示在相框的镂空区域里，达到你想要的视觉效果。

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