html - Force image tag to be perfect circle

Question

Is this possible? I want an image to be a perfect circle no matter if the image is not a perfect square ie: 100px x 100px.

.circle {
 border-radius: 50%;
 height: 100px;
 width: 100px;
}

With that code, if the image is 200x150, the img tag would be in the shape of an oval. Could I get a perfect circle no matter the image size?

<img class="circle" src="/link/to/img.jpg" height="80" width="80" />

Answer 1

No, you need to wrap the image in a div, apply the rounding to that and hide any overflow.

Here I have also centered the image with flexbox but that's not a requirement.

.circle {
 border-radius: 50%;
 height: 100px;
 width: 100px;
 overflow: hidden;
 display: flex;
 justify-content: center;
 align-items: center;
}

<div class="circle">
  <img src="http://www.fillmurray.com/460/300" alt="">
</div>

<h2> Actual Image</h2>

  <img src="http://www.fillmurray.com/460/300" alt="">