How to display user profile image in circle?

Question

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.

Answer 1

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">

Answer 2

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