How to display user profile image in circle?

by

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

Leave a Comment

tech