CSS aspect-ratio完全ガイド｜画像・動画・カードレイアウトの比率を自由に設定する方法

Webデザインで「画像の縦横比が崩れてしまった」「iframeの動画がスマホで変に伸びてしまう」――
そんな経験はありませんか？

これまで、縦横比を保つためにはpadding-topのトリックやJavaScriptを使う必要がありましたが、
今では aspect-ratio プロパティを使うことで、CSSだけで簡単に縦横比を指定できるようになりました。

この記事では、aspect-ratio の基本から応用まで、実例コード付きで丁寧に解説します。
初心者の方でもこの記事を読めば、もう「比率が崩れる問題」で悩むことはありません！

aspect-ratioとは？

aspect-ratio は、要素の縦横比（width : height） を指定するためのCSSプロパティです。
たとえば、aspect-ratio: 16 / 9; と指定すると、要素の幅と高さの比率が16:9になります。

See the Pen Untitled by suguru (@suguru22) on CodePen.

このコードを実行すると、.box は常に16:9の比率を保ちながらサイズが変化します。
スマホ・PCどちらでも、同じ比率を維持するのが特徴です。

aspect-ratio だけではサイズが確定しないため、通常は width（幅）を指定します。
height は自動で計算されます。

See the Pen Untitled by suguru (@suguru22) on CodePen.

この場合、縦横比4:3で高さは自動的に 225px（300 ÷ 4 × 3）になります。

逆に、高さを固定して横幅を比率で決めることも可能です。

See the Pen Untitled by suguru (@suguru22) on CodePen.

この場合、幅も200pxとなり正方形になります。

画像はレスポンシブ対応でwidth: 100%を指定することが多いですが、縦比が崩れがちです。
aspect-ratioを使えば、アスペクト比を固定しながら柔軟にリサイズできます。

See the Pen Untitled by suguru (@suguru22) on CodePen.

これで、どんな画面幅でも美しく16:9を維持します。

YouTubeのiframeを埋め込むと、スマホで表示崩れしやすいですが、aspect-ratioで解決できます。

See the Pen Untitled by suguru (@suguru22) on CodePen.

これで動画も常に16:9の比率をキープし、余白の黒帯も不要になります。

aspect-ratio は flexbox や CSS Grid の中でも有効です。
カードレイアウトなどで、すべての要素を同じ比率で並べるのに最適です。

See the Pen Untitled by suguru (@suguru22) on CodePen.

これで、どんな画面幅でも全カードが同じ縦横比で整列します。

Can I Use – aspect-ratio によると、主要ブラウザの最新版ではすべてサポートされています。

用途	コード例	説明
固定比率のボックス	`aspect-ratio: 1 / 1;`	正方形を簡単に作成
レスポンシブ画像	`aspect-ratio: 16 / 9; object-fit: cover;`	画像比率を保ちつつ拡大縮小
動画埋め込み	`aspect-ratio: 16 / 9;`	iframeでスマホ崩れを防ぐ
グリッド・カード	`aspect-ratio: 3 / 2;`	均一なカードレイアウト

aspect-ratioを使えば、これまで複雑だったレイアウトが1行のCSSでスッキリ解決します。
ぜひ次のコーディングから活用してみましょう！