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, Jan 15 '20 at 17:42
Oh, I should have explain more briefly, I am actually using scss — Marvold, Jan 15 '20 at 17:43
Does this answer your question? [Rounded corners on rectangular image using CSS only](https://stackoverflow.com/questions/25267774/rounded-corners-on-rectangular-image-using-css-only) — disinfor, Jan 15 '20 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, Jan 15 '20 at 17:49
your codes works fine : https://jsfiddle.net/Lt21nxwr/ (img) or https://jsfiddle.net/h94k7a01/ (background) Please clarify , what is your svg ? — G-Cyrillus, Jan 15 '20 at 17:57
Your code looks fine and works when I tested it with my own image. I would say that it is either the image (not cropped maybe) or other code on the page is interfering with the image. — Emmy, Jan 15 '20 at 18:03
I assume the problem was with the image, I picked another one and it has worked for me — Marvold, Jan 16 '20 at 10:17

IvanS95 · Accepted Answer · 2020-01-15T17:57:17.140

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>

This answer helped me with the object-fit property:) – Marvold Jan 16 '20 at 10:16 — Marvold, Jan 16 '20 at 10:16

score 0 · Answer 2 · answered Jan 15 '20 at 17:43

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

How to make a round img using css

2 Answers2