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

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('http://placehold.it/400x200');
}

.two {
  background-image: url('http://placehold.it/200x200');
}

.three {
  background-image: url('http://placehold.it/200x400');
}

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:

---

object-fit

MDN - CSS Tricks - Can I Use

A newer alternative is to use the object-fit property on a regular 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;
}