在 div 中放置 Next/Image 组件，同时保持纵横比和边框圆角

Question

我一直在尝试用圆角设计 NextJS 图像的样式，同时也增长以适应它包含的 div（图像上的蓝色，很难看到但存在）并保持宽高比（直到运行时才知道）。我目前所拥有的所有东西都被打破了，图像没有得到

border-radius

但是它周围的盒子得到了（图像上的黑色）。如果不对图像大小进行硬编码，我找不到使边界半径起作用的方法，因为它必须是动态的。唯一要考虑的其他矢量是，这全部包含在另一个

fixed

定位的 div（图像上的红色）中，该 div 包含整个弹出窗口。

我已经从其他线程的建议中尝试了下面的方法，它几乎可以工作，我发现的唯一问题是图像没有收到圆角，因为它的框大于内容，因此圆了那个框而不是图像.

{/* Card that shows on click */}
            <div className='fixed z-10 w-full h-full left-0 top-0 invisible bg-black/[.6]' id={'hidden-card-' + title} onClick={hideEnlargement}>
                <div className='w-[80%] h-[80%] translate-x-[calc(50vw-50%)] translate-y-[calc(50vh-60%)] rounded-2xl'>
                    <Image
                        src={img} 
                        alt={alt}
                        quality={100}
                        className="rounded-2xl bg-black m-auto"
                        fill={true}
                        style={{"objectFit" : "contain"}}
                    />

                </div>
                
            </div>

Answer 1

一些调整将使它起作用：

1. 为了简洁起见，我只是用

   w-full h-full left-0 top-0

   替换了

   inset-0

   。 inset-0 类与设置 top, right, bottom, left 都为 0 相同。
2. 在图像的包装 div 上，绕过那里的角落并将溢出设置为隐藏。此外，由于您有 m-auto，它将通过左右均匀分布边距使图像水平居中，因此您应该删除 translate-x 类。我还使用了内置的

   h-3/4

   和

   w-3/4

   ，这是 75% 的宽度和高度。
3. 最后，将您的图像设置为具有 100% 的高度和宽度以及适合对象的封面。使用 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>

Stackblitz 演示