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

正円を描画するのに、

html
1<div class = circle1> </div>

css
1.circle1{
2  width: 25px;
3  height: 25px;
4  border-radius: 50%;
5  background-color: skyblue;
6}

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

css
1.circle1{
2  width: 25%;
3  height: 25%;
4  border-radius: 50%;
5  background-color: skyblue;
6}

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

kei344

2020/06/25 10:12

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

yshk0402

2020/06/25 11:34

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

CSS
1.circle1{
2  width: 25%;
3  /*height: 25%;*/
4  border-radius: 50%;
5  background-color: skyblue;
6  height: 0;
7  padding-top: 25%;
8}
9```**動くサンプル：**[https://jsfiddle.net/eLx20r6v/](https://jsfiddle.net/eLx20r6v/)
10
11---
12
13【padding - CSS: カスケーディングスタイルシート | MDN】
14[https://developer.mozilla.org/ja/docs/Web/CSS/padding#Values](https://developer.mozilla.org/ja/docs/Web/CSS/padding#Values)
15> <percentage>
16    コンテナーブロックの width に対するパーセントによるパディングの寸法です。