崩れない箱
aspect-ratio
幅が変わっても縦横の比率を保つ。画像やカードの「読み込んだ瞬間ガタッとずれる」を消せる。
AIへの頼み方
サムネイル画像の枠を aspect-ratio: 16 / 9 で固定して、画像は object-fit: cover で切り取ってください。読み込みが終わる前から場所が確保されて、レイアウトがずれないようにしてください。
動くデモ
この項目のデモは自動では動きません。操作して確かめてください。
全画面で見る ↗最小コード
/* 幅がいくつになっても 16:9 を保つ */
.thumb {
width: 100%;
aspect-ratio: 16 / 9;
}
/* 画像なら object-fit とセットで使う（はみ出しを切り取る） */
.thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 読み込み前から場所を取れるので、
画像が入った瞬間に下がガタッとずれない（CLS 対策）*/対応状況
定番 2026年08月時点で確認
Baseline widely available（newly 2021-09-20 / widely 2024-03-20）。この辞典のデモ枠もこれで領域を先に確保している。
実案件でそのまま使える。画像を並べるなら基本的に付ける。
対応状況は自動更新していません。確認日より後の変化はこのページに反映されていない場合があります。
使いどころ／避けどころ
画像やカードを並べるときに、まず付ける。幅がいくつになっても縦横の比率が保たれるので、画面の大きさを問わず並びが揃う。
いちばんの値打ちは見た目より読み込み時のガタつきを消せることにある。画像が届く前から場所が確保されるので、表示された瞬間に下の内容が押し下げられない。読んでいる途中で文章が飛ぶ、押そうとしたボタンがずれる、といった不快さがなくなる。この辞典のデモ枠も同じ理由でこれを使っている。
画像に使うときは object-fit: cover とセットにする。枠の比率と写真の比率が違っても、はみ出したぶんを切り取ってくれる。切り取られて困る写真——端に大事なものが写っているもの——には向かないので、そういう画像は元の比率のまま置く。
高さを px で固定するやり方は、幅が縮んだときに形が変わる。スマートフォンで見たときだけ間延びして見えるのは、たいていこれが原因になる。
注意するのは、中身が入ると比率が破られること。指定した比率より中身が高ければ、箱は伸びる。文字を入れる枠に使うときは、はみ出す前提で考えるか、overflow の扱いを決めておく。