CODEWITHSUNDEEP
htmlcssimagecornerradius
kevx
kevx

Reputation: 89

CSS Responsive Border-Radius Image

I want to make an image round (circle) from CSS, but, when I use border-radius: 50%; my image goes ellipsoidal.

I expect to output a responsive circle with that image.

How I can do that?

Thanks!

#image {
  width: 100%;
  border-radius: 50%;
}
<div id="main">
  
  <figure id="img-div">
    <img id="image" src="https://wallpaperaccess.com/full/486693.jpg" alt="A bulb that represent electricity">
  </figure>
  
</div>

Upvotes: 1

Views: 2304

Answers (3)

Dimitri Bosteels
Dimitri Bosteels

Reputation: 381

Your image needs to be square to obtain this result.

You can use this : How to "crop" a rectangular image into a square with CSS? to keep it square and responsive.

After that, you radius will make it circle.

Upvotes: 1

sbrrk
sbrrk

Reputation: 894

You can do it by resizing your image just make your image same height and width like below..

this is only another way you can do it..

#image {
  width: 100%;
  border-radius: 50%;
}
<div id="main">
  
  <figure id="img-div">
    <img id="image" src="https://i.sstatic.net/q2ola.jpg" alt="A bulb that represent electricity">
  </figure>
  
</div>

Upvotes: 1

KLTR
KLTR

Reputation: 1334

You need to set the same height and width in order for an element to be a circle.

#image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
}
<div id="main">
  
  <figure id="img-div">
    <img id="image" src="https://wallpaperaccess.com/full/486693.jpg" alt="A bulb that represent electricity">
  </figure>
  
</div>

Upvotes: 1

Related Questions