CODEWITHSUNDEEP
htmlcss
Sylar
Sylar

Reputation: 12072

Force image tag to be perfect circle

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

Upvotes: 11

Views: 10070

Answers (3)

RockyK
RockyK

Reputation: 432

Use the object-fit property. It won't matter if the image is wide or long, it'll always be laid out in a perfect circle.

.circle {
 border-radius: 50%;
 height: 100px;
 width: 100px;
 object-fit: cover;
 object-position: center;

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

Here's the example using all different size images: https://codepen.io/rockycorp/pen/ZEKbzzp

Upvotes: 2

Carlos Alves Jorge
Carlos Alves Jorge

Reputation: 1985

I know this question is a bit old but there is actually a way to achieve what is asked without using a wrapper div:

.circle {
 border-radius: 50%;
 object-fit: cover;
}

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

Upvotes: 2

Paulie_D
Paulie_D

Reputation: 115045

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

Upvotes: 19

Related Questions