CSS Responsive Border-Radius Image

Question

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>

You should have height and width of the image same to have a circle — Sonia
– Sonia, Commented Sep 12, 2019 at 14:02
stackoverflow.com/questions/15167545/… Check this to obtain the square image. — Dimitri Bosteels
– Dimitri Bosteels, Commented Sep 12, 2019 at 14:05

sbrrk · Accepted Answer · 2019-09-12 14:10:56Z

1

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>

answered Sep 12, 2019 at 14:10

sbrrk

8941 gold badge7 silver badges11 bronze badges

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

1 Comment

kevx Over a year ago

The image must be a square, I undestand. Thanks!

KLTR · Accepted Answer · 2019-09-12 14:06:44Z

1

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>

answered Sep 12, 2019 at 14:06

KLTR

1,3442 gold badges14 silver badges38 bronze badges

1 Comment

kevx Over a year ago

Ok, I got this, but now the image will be no more responsive, right? I want to keep that circle image responsive.

Dimitri Bosteels · Accepted Answer · 2019-09-12 14:16:26Z

1

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.

answered Sep 12, 2019 at 14:16

Dimitri Bosteels

3814 silver badges12 bronze badges

1 Comment

Dimitri Bosteels Over a year ago

Don't hesitate to set it as an answer if this solved your issue. And no problem :)

Collectives™ on Stack Overflow

CSS Responsive Border-Radius Image

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related