41

I have images that are 480px wide by 640px high.

I want to display them as circles on a webpage 150px wide using CSS. But I want to see the centre of the image.

So take 80px of the top and bottom of the original image produces the square with the image I want to see. I then want to make that into a circle.

Everything I try stretches the image as most examples are to use a square image to start with.

Can any one help

user3086854
  • 571
  • 1
  • 6
  • 8

4 Answers4

83

You can set the image as the background of an element, set its background-size to cover, and then use border-radius to round the edges. This works with images of any aspect ratio, and will scale the image to fill the container without stretching/distorting it.

#avatar {
    /* This image is 687 wide by 1024 tall, similar to your aspect ratio */
    background-image: url('https://i.stack.imgur.com/Dj7eP.jpg');
    
    /* make a square container */
    width: 150px;
    height: 150px;

    /* fill the container, preserving aspect ratio, and cropping to fit */
    background-size: cover;

    /* center the image vertically and horizontally */
    background-position: top center;

    /* round the edges to a circle with border radius 1/2 container size */
    border-radius: 50%;
}
<div id="avatar"></div>
user229044
  • 232,980
  • 40
  • 330
  • 338
  • 2
    Set `background-position` to `: top center` instead of `: center` only. This way the circle will focus on the person's head instead of chest, because it's the center of the image most of the time a profile photo is taken. – NaN Nov 29 '17 at 14:32
  • 1
    This is literally the only solution that works with all images aspect ratios – Ismaeel Sherif Mar 16 '22 at 12:30
39

Another solution is to set the sizes for img and use "object-fit: cover;". It will do the same as the "background-size:cover" without messing with background images.

img {
  object-fit: cover;
  border-radius:50%;
  width: 150px;
  height: 150px;
}
<img src="https://i.stack.imgur.com/Dj7eP.jpg" />

I found it on Chris Nager post. - 1

Edit: As @prograhammer mentioned, this doesn't work on IE. Edge supports it only on <img> tags.

Partial support in Edge refers to object-fit only supporting <img> - 2

Edit 2: This post of Primož Cigler shows how to use Modernizr to add a fallback support for IE but, in this case, you will need to add a wrapper to de image.

Nitsan Baleli
  • 5,393
  • 3
  • 30
  • 52
Brosig
  • 724
  • 1
  • 10
  • 19
  • 1
    @prograhammer Partial support in Edge refers to `object-fit` only supporting `` on Edge. Taken from [Can I Use](https://caniuse.com/#feat=object-fit) – Brosig Jan 24 '18 at 12:52
  • 2
    Wrapping up 2020, Can I Use shows all current browsers support this. IE 11 notwithstanding. – Merovex Dec 28 '20 at 10:25
  • I prefer this solution, as using the background image method will not be semantic. However, in this answer, the following line is missing to give the same result as the accepted answer: object-position: top center; – Ola Karlsson Mar 29 '23 at 10:47
23

If the image is required to be in the HTML rather than a background image

.wrapper {
  width:150px;
  height:150px;
  margin: 25px auto;
  overflow: hidden;
  border-radius:50%;
  position: relative;
}

.wrapper img {
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%)
}
<div class="wrapper">
  <img src="https://via.placeholder.com/640x480" alt="" />
</div>
incutonez
  • 3,241
  • 9
  • 43
  • 92
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
2

Another solution is simple css class for img element:

.avatar {

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    -webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
}

Usage:

<img class="avatar" src="http://path.to/image.jpg" />
Jacek Gralak
  • 174
  • 2
  • 13