CSSで要素を幅と同じ高さ(widthとheightが同じ)にパーセント(%)指定して常に正方形又は正円にする

CSSで要素をアスペクト比1.0固定[幅と同じ高さ(widthとheightが同じ)]にパーセント(%)指定して、常に正方形又は正円にする



解説

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>




Mam's WebSite