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, Sep 12 '19 at 14:02
https://stackoverflow.com/questions/15167545/how-to-crop-a-rectangular-image-into-a-square-with-css Check this to obtain the square image. — Dimitri Bosteels, Sep 12 '19 at 14:05

score 1 · Answer 1 · answered Sep 12 '19 at 14:06

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 '19 at 14:06

KLTR

1,263
2
14
37

Ok, I got this, but now the image will be no more responsive, right? I want to keep that circle image responsive. – kevx Sep 12 '19 at 14:09

score 1 · Accepted Answer · answered Sep 12 '19 at 14:10

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.stack.imgur.com/q2ola.jpg" alt="A bulb that represent electricity">
  </figure>
  
</div>

answered Sep 12 '19 at 14:10

sbrrk

896
1
7
10

The image must be a square, I undestand. Thanks! – kevx Sep 12 '19 at 14:18

score 1 · Answer 3 · answered Sep 12 '19 at 14:16

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 '19 at 14:16

Dimitri Bosteels

381
4
12

Don't hesitate to set it as an answer if this solved your issue. And no problem :) – Dimitri Bosteels Sep 12 '19 at 14:23

CSS Responsive Border-Radius Image

3 Answers3