aspect-ratioで画像枠の比率をそろえる：高さが変わらない原因

カードを並べたら、縦長の写真だけ大きく伸びて、見出しの位置がそろわない。高さを180pxに固定すると今度は狭い画面でも高さだけが残る。幅が変わるたびに高さも追従させたいなら、寸法ではなく比率を指定します。

この練習ではaspect-ratioで画像枠の比率をそろえます。HTMLのimgとCSSの幅指定が分かる人向けです。写真を探す手間を省くため、横長と縦長の図形画像をコードに含めます。架空の図版一覧で、画像の中身より「箱が何pxになったか」を測る課題です。

320×180と160×90は、同じ形の枠

16対9の枠なら、高さは幅の9/16です。幅320pxでは180px、幅160pxでは90pxになります。二枚の画像を同じ高さに見せたい場合も、その高さを先に固定する必要はありません。同じ幅と同じ比率から、高さを求められます。

aspect-ratioは、箱の幅と高さを求める際の優先比率です。どんな指定よりも強く形を固定する命令ではありません。MDNの説明では、幅と高さの少なくとも一方が自動であることが必要だと確認できます。今回なら幅を親に合わせ、高さをautoにします。

枠の比率と、元画像の比率は別です。素材が3対2でも2対3でも、今回は表示する箱を16対9にします。実寸を使った画像の領域確保のように、素材全体の比率をそのまま表示へ使う場面とは条件が違います。

二つの素材を、同じCSSへ通す

次をratio.htmlへ保存してブラウザーで開きます。外部画像やライブラリは不要です。imgのwidthとheightには、それぞれの図の本来の寸法を記載しています。CSSで指定した幅と高さが、その表示寸法を決めます。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>二枚の図版｜比率の練習</title>
<style>
body { margin: 16px; font-family: sans-serif; line-height: 1.8; }
main { max-width: 640px; margin: auto; }
figure { width: 100%; max-width: 320px; margin: 0 0 24px; }
.thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #eee;
}
figcaption { padding-block: 8px; }
</style>
</head>
<body>
<main>
<h1>図版の一覧（架空の練習）</h1>
<figure>
  <img class="thumb" width="600" height="400"
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400'%3E%3Crect width='600' height='400' fill='%23e7eef2'/%3E%3Ccircle cx='300' cy='200' r='120' fill='%232f637c'/%3E%3C/svg%3E"
    alt="青い背景の中央に濃い青の円">
  <figcaption>元の図は600×400</figcaption>
</figure>
<figure>
  <img class="thumb" width="400" height="600"
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='600'%3E%3Crect width='400' height='600' fill='%23fff1e8'/%3E%3Ccircle cx='200' cy='300' r='120' fill='%23cf5700'/%3E%3C/svg%3E"
    alt="薄いオレンジの背景の中央に濃いオレンジの円">
  <figcaption>元の図は400×600</figcaption>
</figure>
</main>
</body>
</html>

figureに余白以外の装飾を加えず、imgにも枠線やpaddingを入れていません。そのため測った画像の外寸と、計算した幅・高さをそのまま照合できます。後で装飾を足すなら、box-sizingと測定対象もそろえてください。

開発者ツールでimgを選び、表示された寸法を読みます。Consoleが使えるなら、document.querySelector('.thumb').getBoundingClientRect()のwidthとheightでも調べられます。ウィンドウ幅そのものではなく、余白を引いた後の画像幅が計算の出発点です。

heightを残す失敗と、autoを足す失敗

最初の失敗は、.thumbのheightを180pxへ変更することです。幅320pxでは正常に見えますが、figureのmax-widthを160pxへ変えても高さは180pxのままです。幅も高さも指定で決まるため、aspect-ratioから高さを求める余地がありません。

修正はheightをautoへ戻すことです。max-widthが160pxのままで二枚とも160×90になれば、幅へ追従する状態に戻っています。320pxでしか確認しないと、偶然一致した寸法を比率の効果だと思い込んでしまいます。

二つ目の失敗は、heightをautoにしたまま、aspect-ratioをauto 16 / 9にすることです。これは「いつでも16対9」の別表記ではありません。画像の読み込み後は自然な縦横比が使われるため、幅320pxなら横長の図は約213.33px、縦長の図は480pxの高さになります。

読み込み前の仮の比率を指定したい場面にはautoの併記が向きます。今回は素材が届いた後も共通枠に収めたいので、autoを外して16 / 9へ戻します。両方の画像を読み込み終えてから、同じ320×180になるか再確認してください。

この二つは原因が違います。前者は自動で計算する寸法がなくなり、後者は計算に使う比率が画像の自然な比率へ切り替わっています。どちらにも同じheightを追加して直そうとすると、幅に追従する条件をまた失います。

枠をそろえてよい画像かを確認する

この例のobject-fit: coverは、箱を満たすよう画像内容を拡大・縮小し、はみ出す部分を見せません。object-fitの資料で、全体を収めるcontainとの違いを確認できます。枠の寸法を決めるのがaspect-ratio、枠内の画像内容を収めるのがobject-fitです。

切り抜ける写真なら共通枠が候補になります。一方、図面、文字入りの掲示、商品の全形を比較する写真は、端が欠けると情報を失います。containへ変えて余白を許容するか、素材本来の比率で表示するかを選びます。単にカードの下端をそろえる都合だけで決めません。

切り抜く位置だけを変えたい場合はobject-positionの確認、幅によって別の構図を渡したい場合はpictureの使い方へ進めます。今回の指定は、別の素材を選んだり、画像ファイルを軽量化したりするものではありません。

幅を半分にした記録を残す

max-widthを320pxへ戻した状態で、二枚とも320×180になるか確認します。次に160pxへ変え、二枚とも160×90になることを記録します。三つ目はobject-fitをcontainへ変更する比較です。このときも枠の寸法は変わらず、画像全体と余白が見えるのが期待結果です。

幅320pxの画面では、左右16pxの余白を引き、枠は288×162になります。画面幅と枠幅を取り違えず、本文と説明文にも横はみ出しがないか見てください。figureを320pxの固定widthへ戻すと狭い画面で収まらなくなるため、完成例のwidth: 100%は残します。

最後にheightへ固定値が混ざっていないこと、autoを比率へ併記するかの判断、切り抜いてよい内容かの三点を確認します。レスポンシブCSSの無料レッスンの制作物でも、最大幅での一枚に加えて、枠の幅を半分にした記録を残すと、比率が効いているかを判断できます。