38

I am developing a site where the users' profile image needs to display in a circle. There are many circles on this site and the circle size can vary.

I can display square images properly but with vertical and horizontal images I face a problem.

I have to display the image in a circle with the below criteria:

  • Suppose image size is 500x300. The image should crop 100px off of the right and left sides, so that the center of the image is shown. Now the image should be 300x300, centered. Then I need to make a circle from that image. OR hide 100px of the right and left of the image using CSS.
  • If image size is 300x500, then the top and bottom area should be hidden using CSS

What do I have to do to fix this? CSS-only answers are best for me, if possible.

1
  • You could use border-radius
    – Carl0s1z
    Sep 5, 2014 at 11:50

4 Answers 4

81

background-size

MDN - CSS Tricks - Can I Use

As the image sizes are variable, you want to make sure they cover the div as well as being centered within it.

Adding the border-radius: 50%; will give you the circle effect.

.user {
  display: inline-block;
  width: 150px;
  height: 150px;
  border-radius: 50%;

  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.one {
  background-image: url('https://via.placeholder.com/400x200');
}

.two {
  background-image: url('https://via.placeholder.com/200x200');
}

.three {
  background-image: url('https://via.placeholder.com/200x400');
}
<div class="user one">
</div>

<div class="user two">
</div>

<div class="user three">
</div>

In practice, you wouldn't want to have a class for each image, so you'd specify it with an inline style in the markup:

<div class="user" style="background-image:url('path/to/user/img.png')"></div>

object-fit

MDN - CSS Tricks - Can I Use

A newer alternative is to use the object-fit property on a regular <img> tag. This does not work in IE or older versions of Edge.

.user {
  display: inline-block;
  width: 150px;
  height: 150px;
  border-radius: 50%;

  object-fit: cover;
}
<img src="https://via.placeholder.com/400x200" class="user">
<img src="https://via.placeholder.com/200x200" class="user">
<img src="https://via.placeholder.com/200x400" class="user">

0
8

set the image as background, centered.

<div class="image"></div>

css:

.image{
  width: 300px;
  height: 300px;
  border-radius: 50%; /*don't forget prefixes*/
  background-image: url("path/to/image");
  background-position: center center;
  /* as mentioned by Vad: */
  background-size: cover;
}

fiddle

3
  • Prefixes are not a concern anymore unless you want to support such browsers like Safari 4 Sep 5, 2014 at 11:55
  • @HashemQolami: true, but better safe than sorry ;)
    – Luuuud
    Sep 5, 2014 at 11:57
  • 1
    Also add background-size: cover;
    – Vad
    Apr 27, 2015 at 9:51
2

If you are using bootstrap you have class img-circle to do this.

1
0
<html>  
<head>
<style>
#circle
{
border-radius:50% 50% 50% 50%;  
width:300px;
height:300px;
}
</style>
</head>
<body>
<img src="skin-tone.jpg"
id="circle">
</body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.