jian dan jian dan - 1 year ago 57
HTML Question

(mobile web development) how to make a circle with "border-radius:50%" when its width is percent 80%

I used to make a circle with "width:100px;height:100px;border-radius:50%" in PC;
But there is something wrong when I do the same thing in mobile, because the width in PC is "px", the width in mobile is "percent", so I can't ensure the width and the mobile in mobile is same;

div{border:1px solid #ddd;border-radius:50%;width:80%;height:???}


Answer Source

Just add padding-top with the same value as your width.

div {
  border:1px solid #ddd;
  padding-top: 80%; /* value same as width */