アスペクト比（比率）を固定するプロパティ「aspect-ratio」
「aspect-ratio」プロパティはこれまでインターネットエクスプローラー（IE）に対応しておりませんでした。
IEは2022年６月よりサポートが終了し、Edgeに移行しています。
そのため大手を振って「aspect-ratio」を使用できるようになりました。

今後は「aspect-ratio」プロパティの使い方を覚えてモダンなコーディングを行いましょう。

目次 [ close ]
  1. アスペクト比について
  2. CSS「aspect-ratio」プロパティで比率を固定する
  3. アスペクト比の計算を簡単に行う方法

アスペクト比について

アスペクト比とは、簡単にいうと、横幅と高さの比率のことです。

比率 ２：１

アスペクト比　２：１　のブロック

CSS「aspect-ratio」プロパティで比率を固定する

「aspect-ratio」プロパティの使い方は簡単です。

横幅　/　高さ 　の順番で比率を指定するだけです。

2:1 でも 16 / 9 でもデザインに合わせて比率を指定しましょう。

.color_box　{
  width:800px;
　
  //アスペクト比を指定
  aspect-ratio: 2 / 1;
}

アスペクト比の計算を簡単に行う方法

そもそも比率を出すのが難しいという方もいらっしゃるかもしれません。
「2 / 1」のような簡単な数字の比率ならいいですが、デザインによっては計算しづらいこともあると思います。

そんなときは、アスペクト比を計算してくれる、ありがたいサイトがございます。

■アスペクト比計算ツール

https://aspect.arc-one.jp/

便利なツールですので、ブックマーク推奨です。

便利なツールを活用してどんどんコーディングしていきましょう。