CSSのaspect-ratioが効かない｜画像の幅・高さと縦横比の確認手順

aspect-ratio: 16 / 9;を指定したのに、画像が4:3のままになる。横長にはなったものの、写真の顔や丸いものがつぶれて見える。そんなときは、画像を表示する枠の大きさと、枠の中の画像の見せ方を分けて確認します。

ここでいう枠は、画像を表示するスペース（img要素の表示領域）です。

最初に見るのは、対象のimg（画像を表示するHTML要素）に適用されているwidth（幅）とheight（高さ）です。両方の寸法が決まっていると、aspect-ratioを書いても、その寸法を16:9に変える働きはしません。

この記事では、HTMLのimgで表示した画像を中心に、固定寸法、height: auto、auto 16 / 9の違いを同じ4:3画像の例で確認します。自分の症状に合う箇所から試し、枠の比率と画像の形が意図どおりになれば、保存後の確認へ進んでください。

症状から確認する場所を選ぶ

この手順は、PCのブラウザーで確認し、対象ページのHTML・CSSを編集できる人向けです。編集権限がない場合は、症状と対象画像の場所を管理者へ伝えてください。変更前のCSSをコピーして控えてから、直したい画像を1つ選びます。「16:9にならない」のか、「16:9にはなったが中身がおかしい」のかで、確認する指定が変わります。

症状	最初の確認
元の比率のまま、枠の形が変わらない	width・heightとautoの指定
枠は横長だが、画像がつぶれる・一部が切れる	object-fitによる画像の見せ方
簡単な例では直るが、元のページやスマホ幅では直らない	実際に適用されたCSSとサイズの制限

背景画像のbackground-imageを扱う場合は、その背景を持つ要素の幅・高さを確認します。背景の収め方はbackground-sizeで調整するため、後半のobject-fitの指定をそのまま置き換えないでください。

幅と高さの指定を確認する

aspect-ratioは、要素の幅と高さの比率を指定するCSSです。16 / 9は「幅16に対して高さ9」を表し、幅320pxなら高さの目安は320 × 9 ÷ 16 = 180pxです。

ただし、比率はサイズを計算するために使われます。幅か高さの少なくとも一方が、自動で決まる状態になっている必要があります。最小・最大サイズなど別の制限がある場合は、その制限も結果に影響します。基本の条件はMDNのaspect-ratioリファレンスでも確認できます。

両方が固定されている場合とheight: autoの場合

次は、幅800px・高さ600pxの4:3画像を、幅320pxで表示する練習例です。すでに編集対象のページがある人は、そのページの指定を確認するだけでも構いません。練習する場合は、PCに新しいフォルダーを作り、4:3のJPEG画像をsample.jpgという名前で入れます。同じフォルダーにテキストエディターでindex.htmlを作り、下のひな形を貼り付けて保存してください。拡張子が.html.txtにならないようにします。

ひな形の/* CSSをここに貼る */を記号ごと下のCSS全体に、<!-- HTMLをここに貼る -->を記号ごと下のimgのコードに置き換えます。保存したindex.htmlをブラウザーで開き、編集するたびに保存して再読み込みしてください。画像が出ない場合は、画像の名前・拡張子と保存先がsrcと一致するかを確認します。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>画像の比率を確認</title>
  <style>
    /* CSSをここに貼る */
  </style>
</head>
<body>
  <!-- HTMLをここに貼る -->
</body>
</html>

幅320pxは確認用の値です。実ページで親の幅に合わせたい場合は、対象に応じてwidth: 100%;を使います。そのときは「常に320×180px」ではなく、実際の幅に対して高さが9/16になっているかを確認してください。

<img class="ratio-image"
     src="sample.jpg"
     width="800" height="600"
     alt="丸い目印のある4:3の画像">

HTMLには元画像に合うwidth="800"・height="600"を記載し、この例の表示サイズはCSSで調整します。これらの属性は、画像を読み込む前に表示領域を確保する手がかりにもなります。別の画像を使う場合は、800・600をその画像の実寸に、altを画像の内容を伝える短い説明に替えてください。同じ比較結果にするには4:3の画像を使います。

CSS先頭の.ratio-imageは、class="ratio-image"が付いた画像だけを選ぶ指定（セレクター）です。自分のページで試すときは、対象画像の実際のclassに読み替えます。同じclassの別画像にも影響するため、変更対象を限定できる指定を使ってください。次は幅と高さを両方固定した状態です。

.ratio-image {
  display: block;
  width: 320px;
  height: 240px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

この指定では320×240pxのままです。aspect-ratioの値が無効なのではなく、幅も高さも指定済みなので、比率から高さを計算する余地がありません。

同じCSSのheight: 240px;を、次の1行に置き換えます。他の行はそのままです。

height: auto;

保存して再読み込みすると、他のサイズ制限がなければ、今度は幅320pxから高さ180pxが計算され、16:9の枠になります。画像の見せ方も目的どおりなら、他の例へ変更せず保存後の確認へ進みます。

右側では枠が浅くなった分、object-fit: coverによって画像の上下が切れます。画像自体の形を保ちながら枠を埋めるための動作で、aspect-ratioが効いていないわけではありません。

auto 16 / 9と16 / 9の違い

aspect-ratio: auto 16 / 9;は、aspect-ratio: 16 / 9;と同じ意味ではありません。元の比率を持つ画像では、読み込み前は16:9を仮に使い、読み込み後は元画像の比率を使います。

先ほどの例でheight: auto;のまま、aspect-ratioだけを次の行に替えると、読み込み後は4:3の320×240pxになります。

aspect-ratio: auto 16 / 9;

aspect-ratioの指定	読み込み後の枠
16 / 9	320×180px（指定した16:9）
auto 16 / 9	320×240px（元画像の4:3）
auto	320×240px（元画像の4:3）

この表は、幅320px・高さauto・元画像4:3で、他のサイズ制限がない場合です。読み込み後も16:9にそろえたいなら、autoを付けない16 / 9を使います。

元画像の比率を持たない通常のdivでは、autoを併記しても指定した16:9が使われます。imgとdivでは結果が異なる点に注意してください。

枠と画像の見せ方を分ける

aspect-ratioが枠のサイズ計算に関わる一方、object-fitは画像の中身をその枠へどう収めるかを決めます。ここではimg要素の表示領域を扱い、外側のdivやfigureとは区別します。

cover・contain・fillを選ぶ

幅320px・高さ180pxの枠に4:3画像を入れる場合、object-fitだけを変えると、次の違いが出ます。

• cover：元の比率を保って枠を埋める。この例では画像の上下が切れる。
• contain：元の比率を保って画像全体を収める。この例では枠の左右に余白ができる。
• fill：枠いっぱいに合わせる。比率が違うため、この例では丸が横長につぶれる。

画像を変形させたくなければ、coverかcontainを選びます。画像全体を見せたいならcontain、枠を埋めたいならcoverが目安です。顔や文字を切りたくない画像にはcontain、一覧のサムネイルなどにはcoverが選択肢になります。

fillはobject-fitの初期値です。ただし、テーマや共通CSSが別の値を指定している場合もあるので、実際の適用値で判断してください。枠が16:9なら、次に直すのは比率ではなく画像の収め方です。各値の定義はMDNのobject-fitリファレンスを参照できます。

coverで必要な部分が切れる場合は、object-positionで画像の見せる位置を調整する手順へ進んでください。切り抜き位置を変えても、枠そのものの比率は変わりません。

親のdivに比率を指定した場合

ここは、すでに親で枠を作っている場合や、親に比率を指定したい場合だけ読む別案です。imgへの指定で解決した場合は変更不要です。親要素とは、HTMLで画像を囲んでいる要素のことです。親のdivを16:9にしても、内側のimgにその指定が引き継がれるわけではありません。

次は、親で枠を作り、imgをその枠の幅・高さに合わせる別の例です。先ほどの例を残さず、HTMLとCSSを一組で置き換えて試します。

<div class="photo-frame">
  <img src="sample.jpg"
       width="800" height="600"
       alt="丸い目印のある4:3の画像">
</div>

.photo-frame {
  width: 320px;
  aspect-ratio: 16 / 9;
}

.photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

この例では、親の幅320pxと比率から高さ180pxが決まり、imgも320×180pxになります。.photo-frame imgは、photo-frameクラスの内側にあるimgを選ぶ書き方です。

このCSSのimgの高さをautoに替えると、画像は元の4:3に沿って320×240pxになります。親の高さも画像に合わせて広がることがあり、「親は必ず16:9のまま」とは限りません。親とimgを別々に選んで大きさを確認すると、どちらの高さを直す必要があるかを見分けられます。

開発者ツールで適用値を確かめる

例では直るのに元のページでは変わらない場合は、書いたCSSと、ブラウザーが実際に使っているCSSを見比べます。Chromeでは次の順に確認できます。タブ名はブラウザーの言語やバージョンで異なることがあります。

幅・高さ・最小サイズの関係を整理したい場合は、CSSのwidth・height・max-width・min-heightの使い分けを確認してください。開発者ツールでの探し方は、Chrome公式のCSS機能リファレンスにも案内があります。

横並びの中だけ画像が小さくなるなら、画像の親にdisplay: flexがないかも確認します。Flexboxでは子要素の幅が調整されることがあるため、Flexboxで画像が縮む原因と直し方で幅の問題を先に切り分けます。

よくある質問

HTMLのwidth・height属性は削除したほうがよいですか？

一律に削除する必要はありません。画像の実寸に合うwidth・height属性は、読み込み前に表示領域を確保する手がかりになります。この記事の例でも800・600を残し、CSS側のwidthとheight: autoで表示サイズを指定しています。属性の値と、CSSの適用値を分けて確認してください。

height: autoだけで16:9にできますか？

元画像が4:3なら、height: autoだけでは通常4:3を保ちます。幅を決めたうえでaspect-ratio: 16 / 9を指定し、別の固定高さや最小・最大サイズの制限がないか確認します。画像の変形や切り抜きはobject-fitで調整します。

spanやaにaspect-ratioを指定しても変わらないのはなぜですか？

通常のインライン表示のspanやaは、aspect-ratioの適用対象外です。比率を持つ枠にしたい場合は、用途に合わせてdisplay: blockやinline-blockにし、幅も確認します。imgは元画像を表示する「置換要素」なので、インライン表示でも同じ制限には当たりません。

まとめ

aspect-ratioが効かないときは、最初に対象要素のwidthとheightを確認します。幅と高さが両方決まっていれば、比率だけを変えても枠の形は変わりません。

幅を基準に16:9へそろえるなら、高さをautoにし、aspect-ratio: 16 / 9を使います。auto 16 / 9は、読み込み済みの画像で元の比率を優先するため、目的に合っているかを確かめましょう。

枠が整ったら、cover・containなどで画像の見せ方を選びます。親とimgの指定先、実際の適用値、最小・最大サイズを順に確認し、保存と再読み込み後も意図した表示になれば完了です。