CODEWITHSUNDEEP
cssimage
harsh4u
harsh4u

Reputation: 2600

How to display user profile image in circle?

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:

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

Upvotes: 39

Views: 106213

Answers (5)

Mudassar Mustafai
Mudassar Mustafai

Reputation: 118

You can use simple html elements like span and set the class on span elements and add css like.

<span class="pic_con_users">
            <span id="initial" class="users_initial">
            </span>  
</span>

CSS for the classes

.pic_con_users {
      max-width: 46px;
    position: relative;
    border-radius: 50%;
    height: 45px;
    width: 45px;
    margin-right: 9px;
    display: inline-block;
    background: #D35400;
}

.users_initial {
    width: 100%;
    text-align: center;
    position: relative;
    display: block;
    line-height: 40px;
    color: #FFFFFF;
    font-family: 'Roboto';
    font-size: 18px;
}

In case of any further help require, let me know.

Upvotes: 0

Luke
Luke

Reputation: 4063

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

Upvotes: 84

Nithya Sundar
Nithya Sundar

Reputation: 31

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

Upvotes: 2

Aadil Masavir
Aadil Masavir

Reputation: 69

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

Upvotes: 0

Luuuud
Luuuud

Reputation: 4439

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

Upvotes: 8

Related Questions