Rounding those thumbnails

A universal way to make circular images out of any shape!

[ BEGIN ]

There are a few ways to create perfect circles out of square or rectangle images. The first, and I believe more recent addition would be to throw a border-radius: 50%;. This should round out each corner to 50%, in both directions, allowing that 50% reach to appear like a perfect circle.

This is great… if your image is already a perfect square. If it’s not, then the image comes out a bit distorted.

I was in a particular situation where I had users upload their own image to the site. This means some users might choose square images and some rectangle in which orientation could be could be portrait or landscape.

This was the crux of my problem. I needed to find out a way to have some sort of custom css that would work universally regardless of what shape image users uploaded to my site.

Get Peter Chicarielli’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

I came across a few different ways to approach the problem, but in the end none of them worked for all cases. I went back and forth and eventually came across some code that did the trick.

.img {
   object-fit: cover;
   border-radius: 50%;
   width: 150px;
   height: 150px;
}

Now, all images came in perfectly squared and centered! There were a few other attempts at which some images looked great, and others were either cut off or the centers were too far left or right.

We’ve discussed the border-radius property, and the width and height are self explanatory, but the object-fit property is worth defining.

[OBJECT-FIT]

This property defines how an element, such as an img, responds to the width and height of its content box. With object-fit we can tell the content to fill that box in a variety of ways such as:

/* Keyword values */
object-fit: fill;
object-fit: cover;
object-fit: contain;
object-fit: none;
object-fit: scale-down;

MDN web docs used a set of images to better illustrate the difference between these different values:

CSS can definitely be frustrating, but adding tips like this to your arsenal can increase your workflow and allow you to move forward. I’m glad I came across this method, but I am still curious to know if there are any better tips out there, or why this particular method might not be the best in certain situations. Feel free to comment below and let me know your thoughts!

[END]