How can I display a regular image as a rounded one?

Issue

So this is what I want to do :

I have a regular rectangle image, and I want to be displayed as a rounded image. How can I do this?

(Image credit)

Solution

I hope I got this right:

• you have a rectangular non-square image, something like this

  

  (width > height) or like this

  

  (height > width)

• and you want to display it in a circle without distorting it, probably as much as you can display of it and the central part, something like this:

  

---

Solutions:

2023 solution

Give the image either a width or a height an aspect-ratio of 1 (square) and set object-fit: cover on it.

img {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%
}

img:nth-child(odd) { width: 10em }
img:nth-child(even) { height: 10em }

<img src='https://images.unsplash.com/photo-1664985363388-0e4bd2b5cdb6?w=250'>
<img src='https://images.unsplash.com/photo-1700587085844-b96c27958df2?w=250'>
<img src='https://images.unsplash.com/photo-1699976971092-7c92ce87965d?w=250'>
<img src='https://images.unsplash.com/photo-1702141258459-6dd8f817e79a?w=250'>
<img src='https://images.unsplash.com/photo-1699031153161-b719847e2607?w=250'>
<img src='https://images.unsplash.com/photo-1702121269747-fe91af4fa4a8?w=250'>

Original 2012 solutions, preserved for web history reasons, but please don't do this nowadays anymore

When you know the size of the image it is really simple: you put it in a wrapper, give a wrapper a width and a height that are both equal to the minimum between the width and the height of the image itself. You then give the wrapper border-radius: 50%; and overflow: hidden;.

Next, you position the image such that the central part is visible.

• if the width of the image is greater than its height (landscape image), then you set its left margin to be (height-width)/2
• otherwise, if the height of the image id greater than its width (portrait image), then you set its top margin to be (width-height)/2

demo

Relevant HTML:

<a href='#' class='circle-wrap'>
    <img src='image.jpg'>
</a>

Relevant CSS for landscape image (dimensions: 468px x 159px):

.circle-wrap {
    overflow: hidden;
    width: 159px; height: 159px; /* height of img */
    border-radius: 50%;
}
.circle-wrap img {
    margin: 0 0 0 -154px; /* (height-width)/2 */
}

---

Alternatively, you could use a JavaScript solution (I'm suggesting this because you list javascript among the tags) if you don't know anything about the orientation (portrait or landscape) of your image or about its dimensions.

demo

I've used a few images of different orientations sizes for testing. The HTML for one:

<a class='circle-wrap' href='#'>
  <img src='image.jpg'>
</a>

Relevant CSS:

.circle-wrap {
  overflow: hidden;
  padding: 0;
  border-radius: 50%;
}
.circle-wrap img { display: block; }

JavaScript:

var wrps = document.querySelectorAll('.circle-wrap'), 
    toCircle = function(a) {
      var style, w, h, img;
      for(var i = 0; i < a.length; i++) {
        style = window.getComputedStyle(a[i]);
        w = parseInt(style.width.split('px')[0],10);
        h = parseInt(style.height.split('px')[0],10);
        /* part that makes the wrapper circular */
        a[i].style.width = a[i].style.height = Math.min(w,h)+'px';
        /* part that takes care of centering imgs */
        img = a[i].querySelector('img');
        if(w > h)
          img.style.marginLeft = ((h - w)/2) + 'px';
        else if(w < h)
          img.style.marginTop = ((w - h)/2) + 'px';
      }
    };

toCircle(wrps);

Answered By - Ana