【CSS】パーセントで指定した横幅に応じた正方形のエリアを描画する

今日、後輩の作業のお手伝いをしているときに見つけた方法です。
個人的にはかなり驚きというか、こんなことできるの！？という指定方法だったので、備忘録としてまとめ。
というか、今後絶対使うときが来る気がする。

参考にさせていただいたサイトはこちらから。

横幅にあわせて正方形のエリアを作って画像を当てはめたいときの簡単なCSS – NaLabo Blog
https://www.nalabo.net/blog/2017/05/04/1009

実装方法ですが、まず HTML を下記のように記述します。

<div class="frame">
    <div class="content">
        <!-- 表示したい要素 -->
    </div>
</div>

で、CSS は下記のように指定します。

.content {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
}

上記のように記述すると、content クラスの要素が、横幅 100% の正方形で描画されます。
ポイントは、height: 0; と padding-bottom: 100%; です。
パーセント指定なので、親要素のサイズが変わっても対応できます。

正直、こんな方法があるのか…とかなり驚きでした。
なお、width: 80%; にするときは、padding-bottom: 80%; としておくと、これでも正方形になります。

以上、パーセントで指定された要素の横幅に応じた正方形を描画する方法でした。
かなり便利だったので、同じことでお困りの方は是非ご参考にしていただければと思います。