How to make a round img using css

Question

I am trying to make a 50% rounded img inside a simple div. I have tried 2 ways to do it, but obviously neither has worked for me. If it makes something clear, the image, that I'm getting is square

/*HTML*/

<div class="img-container"></div>

/*CSS*/
.img-container {
    background: url("../../../../../assets/img/user-photo.svg") no-repeat center top / cover;
    height: 125px;
    width: 125px;
    border-radius: 50%;
  }


/*HTML*/

<div class="img-container">
    <img src="path_to_img" alt="User photo">
</div>

/*CSS*/

.img-container {
     width: 125px;
     height: 125px;

     img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
     }
}

I am getting it quite cropped in the bottom. Are there any other solutions or what I am doing wrong in 2 examples above? Any help appreciate.

What is not working? Seems to be working to me assuming the second on is sass — epascarello
– epascarello, Commented Jan 15, 2020 at 17:42
Oh, I should have explain more briefly, I am actually using scss — Marvold
– Marvold, Commented Jan 15, 2020 at 17:43
Does this answer your question? Rounded corners on rectangular image using CSS only — disinfor
– disinfor, Commented Jan 15, 2020 at 17:44
Your image looks like it is the cause, not the css. Add a border to the image and see if it goes around. — epascarello
– epascarello, Commented Jan 15, 2020 at 17:49

IvanS95 · Accepted Answer · 2020-01-15 17:57:17Z

2

This is some simple markup, a div container and the image is enough.

If the image may come in different sizes or shapes, you can use the object-fit property to make sure it displays correctly regardless. Just make sure you define the explicit size (height and width) you need the image to be, and then you can use object-fit: cover on the img itself so it maintains its aspect ratio and uses all available space for exmaple.

.img-container {
  background-color: purple;
  padding: 10px 0;
  width: 200px;
}

img {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  display: block;
  margin: 0 auto;
}

img.rect-img {
  object-fit: cover;
}

<div class="img-container">
  <img src="https://via.placeholder.com/100" alt="User photo">
</div>

<div class="img-container">
  <img class="rect-img" src="https://via.placeholder.com/100x50" alt="User photo">
</div>

edited Jan 15, 2020 at 17:57

answered Jan 15, 2020 at 17:48

IvanS95

5,8028 gold badges35 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marvold Over a year ago

This answer helped me with the object-fit property:)

jiwopene · Accepted Answer · 2020-01-15 17:43:08Z

0

It works without any problem. I think your image has some transparent parts.

img {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, .4);
}

img.a {
  width: 64px;
  border-radius: 100%;
}

img.b {
  width: 64px;
  border-radius: 100%;
  object-fit: cover;
  width: 64px;
  height: 64px;
}

<h1>Non-square image:</h1>
<img class="a" src="https://images.unsplash.com/photo-1579075475207-e59cd9d39be8">

<hr>

<h1>Converted to square using CSS:
  <h1/>
  <img class="b" src="https://images.unsplash.com/photo-1579075475207-e59cd9d39be8">

answered Jan 15, 2020 at 17:43

jiwopene

3,76720 silver badges33 bronze badges

Collectives™ on Stack Overflow

How to make a round img using css

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related