CSSのaspect-ratioの使い方｜padding-topの計算をやめて、縦横比を1行で書く

画面の幅に合わせて大きさが変わる四角形を、縦横比を保ったまま作りたいとき、CSSには aspect-ratio という一行で書けるプロパティがある。
以前は padding-top に「9÷16＝56.25%」のような計算結果を書いて、中身を絶対配置で重ねる方法が広く使われていた。
web.devの解説では、同じことが width: 100%; aspect-ratio: 16 / 9; の2行で済むと書いてある。

この記事は、web.devの記事「CSS の aspect-ratio プロパティ」を読んで、僕が理解した範囲で整理したものだ。
自分のサイトで測った結果ではないので、体験談は入れていない。
仕様と書き方の話に絞った。

aspect-ratio は何を決めるプロパティか

縦横比は、幅:高さを2つの整数で表す。
写真で多いのは4:3と3:2、動画や最近のカメラでは16:9が多い、とweb.devにはある。
CSSでは、スラッシュで区切って書く。

.container {  width: 100%;  aspect-ratio: 16 / 9;}

幅が決まると、高さは比率から自動で決まる。
スマホで幅が狭くなれば高さも一緒に縮む。
iframeを幅いっぱいに置いて、高さだけ16:9を保ちたい、という場面で使える。

これまでの書き方：padding-top の計算

aspect-ratio が使える前は、padding-top にパーセントを書く方法が「広く受け入れられている」とweb.devは書いている。
計算は、高さ÷幅だ。

• 1:1 は 100%
• 4:3 は 75%
• 3:2 は 66.67%
• 16:9 は 56.25%

親に position: relative と padding-top を書き、子を position: absolute で重ねる。
web.devはこの方法を「直感的ではなく、追加のオーバーヘッドとポジショニングが必要」と説明している。
padding という「余白」の指定を、箱の高さを決める目的に流用しているのも分かりにくい。
aspect-ratio なら、何をしたいかがそのまま読める。

画像が読み込まれる前の場所取りになる

画像は、届くまで高さが分からない。
幅だけ決めて高さを書いていないと、画像が届いた瞬間に下の文章が押し下げられる。
web.devは、aspect-ratio で場所を取っておくとこのレイアウトのずれ（累積レイアウトシフト、CLS）を防げる、と説明している。

img {  width: 100%;  aspect-ratio: 8 / 6;}

画像が届く前から、画像の高さ分の枠ができる。
読んでいた行が下へ逃げる話は画像の大きさの書き忘れの記事に書いた。

img の width と height 属性でも同じことができる

web.devには、もう一つの方法も載っている。
画像のサイズが分かっているなら、img に width と height を属性で書くのがベストプラクティスだ。
800×600の画像なら、width="800" height="600" になる。

ここで面白いのは、数字がピクセルそのものでなくてもいい点だ。
同じ縦横比なら、width="8" height="6" のように比率だけを書いて、CSSで width: 100%; height: auto; を指定する。
web.devは、効果は aspect-ratio を指定したときと同じで、CLSを避けられる、と書いている。
画像そのものの縦横比が分かっているなら、まず属性を書く。
画像以外の枠（iframe、地図、動画の外枠、カードの写真欄）には aspect-ratio を使う。
僕はそう使い分けようと思っている。

中の画像は object-fit で収める

aspect-ratio が決めるのは箱の形だけで、中の画像が箱にどう収まるかは決めない。
web.devでは、object-fit と組み合わせる例が載っている。

.sponsor img {  aspect-ratio: 1 / 1;  width: 100%;  object-fit: contain;}

cover は箱を埋めて、はみ出す部分を切り抜く。
contain は画像全体を見せて、余った部分を空ける。
web.devは、cover はほとんどの場面で均一な画面を保てるが、画像の端が切り抜かれて情報が失われる、とも書いている。
商品写真のように端まで見せたい画像は contain を選ぶ。
object-fit の挙動はobject-fitの記事に詳しく書いた。

auto と比率を一緒に書いたとき

aspect-ratio: auto 16 / 9 のように、auto と比率を両方書くこともできる。
web.devの説明では、画像のように元から縦横比を持つ要素は、その縦横比が使われる。
持たない要素は、書いた16:9が使われる。
画像が届いたら本来の比率に切り替わり、届く前は仮の比率で場所を取っておく、という使い方ができるわけだ。

対応ブラウザ

web.devに載っている対応状況は、Chromeが88、Firefoxが89、Safariが15からだ。
古い環境も見る必要があるときは、padding-top の方法をフォールバックに残す手もある。
ただ、今から作るサイトなら、まず aspect-ratio で書いて、困ったときだけ戻る、でいいと僕は思う。
自分のお客さんのブラウザは、アクセス解析で一度確かめておく。

まとめ

• aspect-ratio: 16 / 9 と書くと、幅から高さが自動で決まる
• padding-top の計算（16:9なら56.25%）は、もう書かなくていい
• 画像の場所取りには、img の width と height 属性（比率だけでもよい）か aspect-ratio を使う
• 中の画像の収め方は object-fit が決める。端まで見せたいなら contain
• 対応はChrome 88、Firefox 89、Safari 15から（web.devの記載）

出典

• CSS の aspect-ratio プロパティ｜web.dev（アスペクト比の定義・padding-top の方法・aspect-ratio での書き方・auto の指定・レイアウトシフトの防止・img の width/height 属性・対応ブラウザ。2026年10月31日に確認）