CODEWITHSUNDEEP
javascripthtml
Jimmy
Jimmy

Reputation: 10341

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

So this is what I want to do :

enter image description here

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

(Image credit)

Upvotes: 1

Views: 324

Answers (4)

Ana
Ana

Reputation: 37179

I hope I got this right:

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

    width > height

    (width > height) or like this

    height > width

    (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:

    in a circle

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 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);

Upvotes: 7

Fabr&#237;cio Matt&#233;
Fabr&#237;cio Matt&#233;

Reputation: 70159

Try

img { border-radius:50%; }

Note that the image must have equal width and height for this to work. If the image doesn't, you can set the width and height with CSS as well.

img { border-radius:50%; width:200px; height:200px; }

Fiddle

Upvotes: 2

Troy Alford
Troy Alford

Reputation: 27236

All you need is CSS to do this:

<img class='circle' src='/my/img/path/img.jpg' />

<style type="text/css">
    img.circle {
        -ie-border-radius: 50%;    /* IE */
        -khtml-border-radius: 50%; /* KHTML */
        -o-border-radius: 50%;     /* Opera */
        -moz-border-radius: 50%;   /* Mozilla / FF */
        -webkit-border-radius: 50%;/* Chrome / Safari */
        border-radius: 50%;        /* CSS Compliant */
    }
</style>

Upvotes: 1

Chandra Sekhar Walajapet
Chandra Sekhar Walajapet

Reputation: 2554

Have a white square image with a transparent circle in the middle and overlay on the image.

Upvotes: 0

Related Questions