I've been attempting to style a NextJS image in a way that it has rounded corners, expands to fit its container div (which is blue in the image), and maintains its aspect ratio (only known at runtime). However, what I currently have is not working as expected - the image does not receive the border-radius, but rather the surrounding box (depicted in black on the image) receives it. I'm struggling to find a solution that allows the dynamic image size while still applying the border radius. Another factor to consider is that all of this is happening within a fixed-positioned div (shown in red on the image) that encompasses the entire popup.
https://i.stack.imgur.com/eneSH.png
I've tested the code snippet below based on recommendations from other sources, and although it almost works, the issue remains with the image not getting the desired rounded corners because the box around it is larger than the content, resulting in rounding the box instead of the image itself.
{/* 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>