レスポンシブで縦横比を維持するCSSと理由解説
レスポンシブ対応で使う機会が多い「要素の縦横比を維持（正方形等）」。よく使われるCSSテクニックですが、理屈が図解されているものが多くなかったので、残しておきます。少しでもお役に立てれば幸いです。
（追記）aspect-ratioというプロパティが浸透してきています。興味ある方はこちらからどうぞ。
やりたいこと：widthを％指定にして、縦横比を維持したい。
中に画像が入っている場合は、その画像の縦横比が維持されるので難なくいけますが、高さが決まっていないブロック要素だと意外にめんどくさいです。
heightの％指定は親要素のheightに準拠するので、親要素の高さが固定値でない場合や可変する場合、親要素の縦横比も維持されないと困ります。
％指定の場合、子要素の縦横比が維持されて初めて親要素の縦横比も維持される、だけど子要素の幅と高さは親要素に準拠…というジレンマ。
解決策：疑似要素でpadding-topを使う
まずはこちら。たとえば全体30%の幅の正方形の場合。
コード解説
①まず全体を囲む要素に幅を％で指定。
②それに疑似要素を設けて、この疑似要素にpadding-top:100%を指定。
ここでpadding-topを使う理由は、marginとpaddingの上下を％指定した場合、親要素のwidthに準拠する仕様があるためです。要素の中に存在する疑似要素にpadding-topだけを設けると、親要素のwidth分だけ高さを確保してくれるという仕組み。
これで大枠の横幅に対する縦幅の比率が指定できました。（長方形の場合はこの値を100%から変更します）
③子要素にposition:absoluteをかけ、位置を戻す
中に何も入らない場合はこのままでいいですが、子要素が存在する場合は疑似要素の高さ分（padding-top:100%）下にずれてしまいます。
そこで親要素にposition:relative、子要素にposition:absoluteをかけ、topとleftの値で親要素の位置まで子要素を戻します。
あとはwidth:100%とheight100％にすることで親要素いっぱいまで縦横広がり、レスポンシブでも縦横比が維持されますね。
まとめ
以上です！paddingとmarginの上下の％指定の特性を知っていると理屈がわかると思いますが、この図解が理解に役に立つと嬉しいです。下記参考もご確認ください。
この記事が気に入ったらサポートをしてみませんか？