aspect-ratioを書いても比率が変わらない？幅・高さの指定を分けてみよう

箱を16:9にしたくてaspect-ratioを書いたのに、高さが変わらない。すでに幅と高さを決めていないか確認してみよう。

このページでは、CSSの縦横比と自動の寸法を作例で理解する。準備はブラウザだけ。実際の写真を切り取らず、色の付いた練習用の箱を使うよ。

幅と高さの関係を指定する

aspect-ratioは、幅と高さの望ましい比率を指定するプロパティ。16 / 9は幅16に対して高さ9、1 / 1は同じ幅と高さを表す。

.box {
  width: 240px;
  height: auto;
  aspect-ratio: 16 / 9;
}

この単純な箱では、幅をもとに高さを計算する。少なくとも一方の寸法が自動である場合に、比率を自動サイズの計算へ使えるよ。実際には内容や最小・最大サイズなども影響するので、どんな箱も必ず指定比率に固定する機能とは考えないようにしよう。

両方の寸法を決めた場合

幅240px、高さ100pxを指定した箱へ16 / 9を加えても、指定した高さを必ず上書きするわけではない。どちらの寸法を自動にしているかが大切なんだ。

動かしてみよう

記事下の作例で、16:9から1:1、4:3へ切り替える。高さが自動の状態では箱の高さも変わり、結果欄で実際の寸法を読める。

続けて「100pxに固定」を選ぶと、高さが固定される。比率だけを切り替えても同じように高さが変わるわけではないことを確認しよう。リセットで16:9・高さ自動へ戻るよ。

狭い画面では幅が収まるよう制限しているため、表示は常に240pxとは限らない。結果欄の数値と、今の画面幅も合わせて見てね。

画像の見せ方とは別の話

箱の比率を決めることと、その中へ画像をどう収めるかは別の指定。枠を16:9にしても、人物の顔が適切な位置へ自動で切り抜かれる保証はないよ。

中の画像はobject-fitの比較、丸い形はborder-radiusと箱の形も参考になるよ。

参照した公式資料

• MDN：aspect-ratio

確認日：2026年10月24日。