在Next.js GitHub项目中有一个讨论和相关的例子。听起来这个例子实现了你想做的事情。tl;dr：

<div className="h-64 w-96 relative"> // "relative" is required; adjust sizes to your liking
  <Image
    src={img.img}
    alt="Picture of the author"
    layout="fill" // required
    objectFit="cover" // change to suit your needs
    className="rounded-full" // just an example
  />
</div>

图像将保留其原始纵横比和填充/覆盖（或任何您选择的object-fit）外部div的大小，您可以使用Tailwind类设置。其他样式，如圆角，可以应用于Image。

它已经解决了，不再需要黑客解决方案。直接用顺风造型就行了！
https://nextjs.org/blog/next-12-2

当我阅读Next.js 13文档时，我发现当你使用fill with nextjs Image标签时，父容器应该是相对的，这一点非常重要。

fill

fill={true} // {true} | {false}

一个布尔值，使图像填充父元素，而不是设置宽度和高度。
父元素必须指定位置：“相对”，位置：“固定”或位置：“绝对”风格。
默认情况下，img元素将自动分配位置：“绝对”风格。
默认的图像适配行为将拉伸图像以适配容器。您可能希望设置对象适应：“contain”表示图像，该图像被装箱以适合容器并保持宽高比。
或者，对象拟合：“cover”将导致图像填充整个容器并被裁剪以保持宽高比。为了使其看起来正确，溢出：“隐藏”样式应分配给父元素。
有关更多信息，请参见：

position
object-fit
object-position

所以我就这样做了：

<div className="relative w-full h-full overflow-hidden">
  <Image   
                                                        
      className="rounded-sm"  
      object-fit="cover" 
      fill={true}  
      alt={group?.name ? group.name : "no details" }
      src="https://www.oddcircles.com/images/group-image.png" 
  />
</div>

您可以使用div容器并对其应用类。

<div className="bg-mint text-mint fill-current">
    <Image
        src={img.img}
        alt="Picture of the author"
        width="200"
        height="200">
    </Image>
</div>