解説
CSSのpaddingを%で指定すると、親要素の幅に対する割合になります。
以下は幅も高さも親要素の幅の30%になります。
<div style="position:relative;width:30%;padding-top:30%;">
</div>
上記の要素に子要素を追加してleft,top,right,bottomを0に設定すると、子要素は親要素と同じ大きさになります。
<div style="position:relative;width:30%;padding-top:30%;"> <div style="position:absolute;left:0;top:0;right:0;bottom:0;"> 幅と高さは親要素に対する30%です </div> </div>
サンプル
幅と高さが常に親要素の30%の正方形となります。
文字等のコンテンツを入れられます。
文字等のコンテンツを入れられます。
幅と高さが常に親要素の30%の正円となります。
文字等のコンテンツを入れられます。
文字等のコンテンツを入れられます。
HTMLとCSSのサンプルコード
<div class="same_wh"> <div> 親要素に対して常に幅と高さは30%で正方形 </div> </div> <div class="same_wh circle"> <div> 親要素に対して常に幅と高さは30%で正円 </div> </div> <style> /* [幅と高さが親の幅の30%の要素] */ .same_wh{ position:relative; width:30%; padding-top:30%; } /* [幅と高さが親の幅の30%の要素]の子要素 */ .same_wh>div{ position:absolute; left:0; top:0; right:0; bottom:0; background:skyblue; overflow:hidden; /* 好みで入れる */ } /* 円形にする場合 */ .circle>div{ border-radius:50%; padding:15%; } </style>