任意のボックス要素の縦横のアスペクト比率を保持したまま、レスポンシブにも対応する方法を紹介します。
HTML
早速ですが、まずはHTMLの記述から。
<div class="aspect"></div>
何の変哲もない普通のボックス要素を用意します。
CSS
続いて重要なCSSの書き方ですが、仮に「横=4:縦=3」の場合を想定します。
.aspect {
position: relative;
width: 100%;
line-height:1;
padding-top: 75%;
}
この「padding-top」の値を求める方法ですが、次の計算式で導き出します。
縦比率 ÷ 幅比率 × 100
今回の場合は「3（縦） ÷ 4（横） × 100」という計算式になるので、「75」という数値になります。
このテクニックを知らないと、わざわざJavaScriptを持ち出すなどして、遠回りかつ複雑になってします。
スタイルシートだけで完結するので覚えておいて損はないでしょう。
以下、サンプルも用意してあるので挙動を確認してみてください。
