CSSでheightをwidthと同じにするには、padding-topを使う方法が便利です。
このページでは、親要素の幅に対して高さを揃えることで、正方形や正円を作るテクニックを紹介します。
「css height widthと同じ」「正方形 css」「html width パーセント」などのキーワードでお探しの方に向けて、実用的なコードとともに解説しています。
解説
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;"> 幅と高さは親要素に対する３０％です </div> </div>
サンプル
幅と高さが常に親要素の３０％の正方形となります。
文字等のコンテンツを入れられます。
文字等のコンテンツを入れられます。
幅と高さが常に親要素の３０％の正円となります。
文字等のコンテンツを入れられます。
文字等のコンテンツを入れられます。
HTMLとCSSのサンプルコード
<div class="same_wh">
<div>
親要素に対して常に幅と高さは３０％で正方形
</div>
</div>
<div class="same_wh circle">
<div>
親要素に対して常に幅と高さは３０％で正円
</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>