解説
CSSのpadding属性で%を指定すると、高さも親要素幅の%指定となるので、
<div style="width:30%;padding-top:30%;position:relative;">
</div>
とすると、幅も高さも親要素幅の30%になります。
更にコンテンツを入れるための子要素のtop,right,bottom,rightを0にすると、子要素は親要素と同じ大きさとなる為、幅と高さが同じになります。
<div style="width:30%;padding-top:30%;position:relative;">
<div style="top:0;right:0;bottom:0;left:0;position:absolute;">子要素にコンテンツを入れる</div>
</div>
サンプル
常に正方形となります。
文字等のコンテンツを入れられます。
文字等のコンテンツを入れられます。
常に正円となります。
文字等のコンテンツを入れられます。
文字等のコンテンツを入れられます。
常に正円となります。
文字等のコンテンツを入れられます。
文字等のコンテンツを入れられます。
サンプルのHTML,CSSコード
<div class="same_wh_parent"> <div class="same_wh"> <div> 常に正方形となります。<br>文字等のコンテンツを入れられます。 </div> </div> </div> <div class="same_wh_parent"> <div class="same_wh circle"> <div> 常に正円となります。<br>文字等のコンテンツを入れられます。 </div> </div> <div class="same_wh circle"> <div> 常に正円となります。<br>文字等のコンテンツを入れられます。 </div> </div> </div> <style> /* 親の要素 */ .same_wh_parent{width:80%;display:flex;margin:10px;} /* 縦横が親の幅の30%のボックス */ .same_wh{ width:30%; /* パディングの%指定は幅基準の為、 widthと同じ値を上部パディングに設定する */ padding-top:30%; background:skyblue; position:relative; /* お好みで以下入れる */ overflow:hidden; } /* 縦横同じボックスの子の要素 */ .same_wh>div{ position:absolute; top:0; right:0; bottom:0; left:0; } /* 円形ボックスにする場合 */ .circle{ border-radius:50%; } .circle>div{ margin:15%; } </style>