◆ padding の % が width を基準にすることを利用する
◆ 横幅を基準に好きなアスペクト比の四角形が作れる
◆ 昔からあるプロパティの組み合わせなので IE11 も動く

CSS で正方形とか 4:3 の四角形のブロックが必要なことありますよね
親の幅が固定なら正方形の部分も 横○px 縦○px と決まるので直接 px 書けばいいのですが % 指定になっていてウィンドウサイズに応じて変えたいとなると難しいです

横方向を基準にするならちょっと変な書き方ですが 方法はあります
padding の % は縦方向でも width を基準にするということを利用してこう書けます

<section style="
  width: 50%
">
    <p>ここに正方形を作りたい</p>
    <div style="
      background: pink;
      padding-top: 100%;
      position: relative;
    ">
        <div style="
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        ">
            中身はここに書く
        </div>
    </div>
</section>

demo

一番外側の section が全体の 50% の幅という指定になっていて その中に div で正方形を作ります
padding-top: 100%; にすれば 横幅と同じ高さのブロックになります
padding-top の値を調整して好きなアスペクト比にできます
16:9 なら padding-top: calc(100% * 9 / 16); になります

でもこれだけだと 中に書いたものは padding の下側になってしまうので 外側 div に position:relative; をつけて 内側に div に position:absolute; top:0; left:0; をつけます

こうすれば padding-top:100%; でできた正方形の中に内側の要素を配置できます


縦方向 padding であればいいので padding-top を padding-bottom にもできます
こっちだと padding の下じゃなく上に本文が来るので position や 内側の div すらなくてもそれっぽく見えます

ただし 親からはみ出して表示されてるだけで 親に height がついていないので内側に height:100%; はつけられません

正方形などアスペクト比固定のものを作りたいときは 内側にpadding を 10px くらい取ってスライドショーみたいの作ったり など ただ文章と入れるだけじゃなくて ちょっと凝ったものを作ることが多いと思います

そうなると height:100%; がついていないと不便ですし padding-bottom にしてもたいていはposition は必要になると思います


まとめると

まず height じゃなくて padding-top (padding-bottom) で高さを作ってアスペクトを固定して
次に position 使ってその内側に要素を配置するというものです



padding の特性を利用してるものなので 縦方向を基準に横方向にするのは無理そうです

CSS に
height: calc(ref(width) / 2); /* 高さは width の半分 */

みたいな 他プロパティの今の値を参照する書き方があればいいんですけどね

計算順序や循環参照の対策などでパフォーマンス落ちたりや実装が難しかったりするのかなー