I am developing a site where the users' profile image needs to display in a circle. There are many circles on this site and the circle size can vary.
I can display square images properly but with vertical and horizontal images I face a problem.
I have to display the image in a circle with the below criteria:
- Suppose image size is
500x300
. The image should crop 100px off of the right and left sides, so that the center of the image is shown. Now the image should be300x300
, centered. Then I need to make a circle from that image. OR hide 100px of the right and left of the image using CSS. - If image size is
300x500
, then the top and bottom area should be hidden using CSS
What do I have to do to fix this? CSS-only answers are best for me, if possible.
border-radius