jian dan jian dan - 6 months ago 16
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:???}

<div></div>




Answer

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

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