几个调整将使其工作：
1.为了简洁起见，我只是将w-full h-full left-0 top-0替换为inset-0。inset-0类与将top，right，bottom，left全部设置为0相同。
1.在你的图片的 Package 器div上，圆化那里的角，并将溢出设置为隐藏。此外，因为你有m-auto，它会通过均匀地分布左边和右边的边距来水平地居中图像，你应该删除translate-x类。我还使用了内置的h-3/4和w-3/4，它们是75%的宽度和高度。
1.最后，将图像的高度和宽度设置为100%，并将cover设置为object-fit。当使用object-fit时，cover会填充整个空间，可能会裁剪图像的顶部/底部或左侧/右侧。object-fill属性将使图像仅填充容器的最大高度或宽度，因此不会裁剪任何图像。

<div
  className="fixed inset-0 z-10 bg-black/[.6]"
  id={'hidden-card-' + title}
  onClick={hideEnlargement}
>
  <div className="rounded-2xl overflow-hidden h-3/4 w-3/4 m-auto translate-y-[calc(50vh-50%)]">
  <Image
    src={img}
    alt={alt}
    quality={100}
    className="bg-black w-full h-full object-cover"
    fill={true}
    />
  </div>
</div>

编辑

为了避免裁剪，但仍然让图像显示为圆角并保持其固有的纵横比，您必须将图像的宽度和高度传递给Next/Image组件。我想不出一种方法，因为如果您不将宽度和高度传递给Next/Image组件，它需要您将fill属性设置为true。
当fill prop设置为true时，它会通过将图像设置为绝对位置来将图像从文档流中取出。因此，您将无法执行某些操作，例如将图像的宽度设置为100%，将高度设置为auto，并允许浏览器根据图像的自然宽度/高度确定适当的尺寸。
因此，如果您将图像的自然/所需高度和宽度与图像细节一起存储，则可以避免使用填充 prop 。
你的modal可能看起来像这样：

// assumes you pass props with an img object containing
// src, alt, width and height properties
<div
  className="fixed inset-0 z-10 bg-black/[.6] grid place-content-center"
  onClick={closeModal}
>
  <Image
    src={img.src}
    alt={img.alt}
    width={img.width}
    height={img.height}
    quality={100}
    className="max-w-[95vw] max-h-[95vh] rounded-2xl animate-bounceIn"
  />
</div>

你可以看到，由于图像有高度和宽度，你可以使用grid place-content-center来居中所有内容，而不需要任何变换或边距。此外，你不需要额外的 Package div。图像本身将是它的自然高度和宽度，但为了确保它不会溢出视口，你可以设置图像的最大宽度和最大高度。当然，这就是在图像上设置宽度和高度的问题所在。一旦应用了max-height或max-width，就会导致图像不成比例。将object-fit设置为contain可以工作，但会丢失圆角。
你可以手动优化你的图片，只使用img标签或picture标签。

在新的Stackblitz演示中，有多个不同高度和宽度的图像。您可以在pages/api/images.js file中看到数据的结构。新的“模态”组件可以在`pages/components/Modal.js文件中找到。