how do make a image circle using next.js image component using next.js 13

Question

I'm trying to make an image look like with the latest next.js 13 using next.js image component but it's going looks like an egg shape a little bit.

I try with this code:

<Image
   src='/profile.jpg'
   width={100}
   height={100}
   className="border border-gray-300 p-2 rounded-[50%]"
   alt="profile-pic"`
 />

but the output is now what would be the solution ? If anybody faces already this issue please help me

Answer 1

You need to put this image inside another div and apply border-radius to that div along with overflow-hidden. If you force the image to have specific width and height, it will be stretched, which is not good. Thus, Next.js Image component will maintain the aspect ratio of the image.

<div className="border border-gray-300 p-2 rounded-[50%] inline-block" style={{width: '100px', height: '100px'}}>
  <Image
   src='/profile.jpg'
   width={100}
   height={100}   
   alt="profile-pic"`
 />
</div>