[CSS]比率を保ったままレスポンシブ対応する方法と設定値の求め方
要素の縦横比を保ったままサイズを可変させる
地図や写真・動画などを綺麗に見せるため、パソコンでもスマートフォンでも縦横比を保ったまま表示させたいと思います。
よく見かける「padding-top」を用いたやり方を採用するのですが、比率の求め方まではなかなか紹介されていないので今回はそちらについても言及します。
See the Pen aspect-ratio by nanase webdesigner (@nanase-777) on CodePen.
縦横比を保ったコンテナの用意
.wrapper-4×3が横：縦＝４：３の比率を、.wrapper-16×9が横：縦＝１６：９の比率を保ったコンテナの役割を持ちます。
そのコンテナの中にimg要素なりiframe要素なりを格納し、縦横100%に伸ばす役割を持った.inner-boxを割り当てることで常に縦横比を保った要素が表示されるということです。
そしてサンプルのコードの中で唯一異なるのがpadding-topの値です。この値はどうやって算出されたのか調査しました。
縦横比の求め方
ずばり
要素の「縦」の比率 ÷ 要素の「横」の比率 × 100 (単位:%)
です。
なのでこれまでの例でいうと
- 4 : 3の場合 | 3 ÷ 4 × 100 = 75%
- 16 : 9の場合 | 9 ÷ 16 × 100 = 56.25%
となります。
この求め方を利用すれば、例えば横：縦＝1280px：781pxの画像を元の比率を保ったまま表示させたいならば
781 ÷ 1280 × 100 = 61.01… ≒ 61%
という値が求められます。
この比率の求め方さえ覚えておけば、どんな比率でも縦横比を保ったまま表示させることができます。
電卓ツール、もしくは筆算でも計算できるのでもう怖くありません！
