如何解决Next.js Image组件适配父div时圆角不生效的问题？

问题根源 #

你当前的代码有两个核心问题：

• Image的父容器未设置position: relative，使用fill={true}时，Next.js Image要求父元素为定位元素（relative/absolute/fixed）才能正确填充空间，否则定位逻辑会混乱。
• 父容器缺少overflow: hidden，导致即使给图片加了圆角，超出容器的部分不会被裁剪，视觉上就像图片没生效圆角。

修复后的代码 #

{/* 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}>
    {/* 新增relative定位和overflow:hidden，同时优化居中方式 */}
    <div className='w-[80%] h-[80%] relative rounded-2xl overflow-hidden mx-auto my-[calc(50vh-40%)]'>
        <Image
            src={img} 
            alt={alt}
            quality={100}
            className="rounded-2xl"
            fill={true}
            style={{ objectFit: "contain" }}
        />
    </div>
</div>

关键改动说明 #

• 给Image父容器加relative：确保fill模式的Image能正确填充父容器空间，不会出现定位偏移。
• 添加overflow: hidden：让父容器的圆角裁剪内部Image，无论图片尺寸如何动态变化，都能保证圆角效果生效。
• 优化居中逻辑：用mx-auto和my-[calc(50vh-40%)]替代原translate写法，更直观且避免垂直居中不准的问题。
• 移除Image的bg-black m-auto：fill模式下Image为绝对定位，m-auto不会生效，父容器背景色可按需单独设置。

修改后图片会自适应父容器尺寸、保持动态宽高比，同时圆角能正常显示。

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