正円を描く（レスポンシブ）

Question

正円を描画するのに、

<div class = circle1> </div>

.circle1{
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: skyblue;
}

このようなやり方は知っていますが、
レスポンシブに正円を描く方法はありますか。
なるべく簡潔なコードで収まると嬉しいです。
ご教授お願いします。

.circle1{
  width: 25%;
  height: 25%;
  border-radius: 50%;
  background-color: skyblue;
}

このようにパーセントで円を描いたときに、正円にならずに悩んでいます。

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[yshk0402]

ご提案ありがとうございます。

Answer 1

他の要素や状況にもよりますが。

.circle1{
  width: 25%;
  /*height: 25%;*/
  border-radius: 50%;
  background-color: skyblue;
  height: 0;
  padding-top: 25%;
}
```**動くサンプル：**[https://jsfiddle.net/eLx20r6v/](https://jsfiddle.net/eLx20r6v/)

---

【padding - CSS: カスケーディングスタイルシート | MDN】
[https://developer.mozilla.org/ja/docs/Web/CSS/padding#Values](https://developer.mozilla.org/ja/docs/Web/CSS/padding#Values)
> <percentage>
    コンテナーブロックの width に対するパーセントによるパディングの寸法です。

Comments

[yshk0402]

解決しました！ありがとうございます