March 12, 2012 3 Comments
Instead of having to edit every image using Photoshop, this handy CSS snippet can make any image appear circular. It uses border-radius (minus prefixes) so the usual browser support there. You can control what part of the image shows using absolute positioning.
But wait! You cry, why not just apply border-radius directly to the image? Because that will only work on perfectly square images. If the image is not square, no matter what you do with the border-radius, you’ll never get a circular image. This method works with any image, of any size, of any aspect ratio.
The trick is to control the width of the image using the inline “width” HTML syntax. This means any image can fit inside the overlay without stretching. Need different sizes? Just create different sized overlays in your CSS.
I only rustled this up in a few minutes just to see if I could do it. Know a better way? Comment below.