解説
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>