【アスペクト比】cssで要素の比率を固定する方法【レスポンシブに対応】

cssで要素の比率を固定する方法

先に結論だけさっさと書きますね！

以下は比率2:1の例

htmlを以下のように記述します。

<div class="wrapper">
  <div class="content">
    <!-- ここに自由にhtmlを書いて下さい -->
  </div>
</div>

気をつける点は、比率を固定したい要素をdivで囲むことです。
※divでなくても何かしらのタグで囲んでおけば大丈夫です。

cssを以下のように記述します。

.wrapper {
  position: relative;
  width: 100%;
}

.wrapper:before {
  content: "";
  display: block;
  padding-top: 50%;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

これで拡大縮小しても2:1の比率を保ち続けるようになります！

ポイントは疑似要素のpadding-topの値

ここでいちばん重要なのは.wrapperの疑似要素のbeforeです！
padding-topを%指定するとその親要素の幅に対しての割合となります。

つまり今回はpadding-top: 50%;となっているので.wrapperの幅に対しての50%の高さを得ます。
※.wrapperの幅が100pxなら高さが50pxになります。

疑似要素で高さを得たのでabsoluteでかぶせる

比率を固定できたのであとは内容（.content）をposition: absolute;かぶせれば完成です！

比率計算（padding-topの値の求め方）

高さの比率 / 幅の比率 * 100

今回の例に当てはめると1/2*100は50となるのでpadding-top: 50%;を指定しました。

要素の幅と高さが決まっている場合

幅と高さ決まっていてその比率を維持したい場合も以下で求められます。

要素の高さ / 要素の幅 * 100

幅100px、高さ50pxなら50/100*100で50となるのでpadding-top: 50%;です。

以上でcssで比率の固定化の方法は終わりです！
僕はこのテクニックは横並びのカードタイプデザインの中でよく使うことが多いです。
覚えておくといろいろな場面で助かること多いので覚えておいて損はないと思います！