トップへ(mam-mam.net/)

CSSで要素の幅と高さをパーセント(%)指定で正方形や正円に

検索:

解説

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>