CSSで画像サイズを指定する方法 縦横比維持・中央寄せ・はみ出し対策

CSSで画像サイズを指定する基本は「width だけ指定して height は auto に任せる」ことで、これだけで縦横比を保ったまま拡大・縮小できます。 レスポンシブ対応なら max-width: 100%; height: auto; の2行、枠の大きさを決めてその中に収めたいときは object-fit、比率そのものを固定したいときは aspect-ratio を組み合わせます。

この記事では、「幅だけ指定」「枠に収める」「枠いっぱいにトリミング」「正方形・16:9に固定」といった目的別に、コピペできるCSSと表示結果を対応させた早見表を用意しました。さらに、画像が親からはみ出す・縦に伸びる・下に隙間ができるという3つのつまずきを再現コードで示し、修正の前後を実測値で比べます。数値はすべて、800×600px（4:3）の画像を幅400pxの親要素に入れ、Chromium 141.0.7390.37（Playwright 1.56.0）で getBoundingClientRect() を使って測ったものです。

画像サイズ指定の早見表

元画像は 800×600px、親要素の幅は 400px です。「表示サイズ」は実測値です。

うまく表示されないときの逆引きです。

確認に使ったHTML

以降の例は、次のHTMLを基本にしています。.box が幅400pxの親要素です。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
  body { margin: 0; }
  .box { width: 400px; background: #eee; }
  /* ここに各例のCSSを書く */
</style>
</head>
<body>
  <div class="box">
    <img src="photo.png" alt="サンプル写真">
  </div>
</body>
</html>

何も指定しない状態では、画像は元のサイズで表示され、親をはみ出します。

目的別：コピペできるCSSと表示結果

幅だけ指定する（縦横比は自動で保たれる）

img { width: 300px; }

親 .box（幅400px）
+------------------------------------+
| +--------------------------+       |
| |                          |       |
| |      画像 300×225        |       |
| |                          |       |
| +--------------------------+       |
+------------------------------------+

実測は 300×225 でした。width か height の片方だけを指定すると、もう片方は元の比率（4:3）から自動で計算されます。 height: auto; は初期値なので、書いても書かなくても結果は同じ 300×225 でした。高さだけ height: 150px; と指定した場合は 200×150、width: 50%; では親の半分の 200×150 になります。

幅と高さを両方指定するとどうなるか

img { width: 300px; height: 300px; }

表示サイズは 300×300 になり、4:3 の画像が正方形に押し込まれて縦に引き伸ばされたように見えます。これは object-fit の初期値が fill（枠に合わせて変形）だからです。幅と高さの両方を決めたいときは、次の object-fit を必ず一緒に指定します。

枠に全体を収める（object-fit: contain）

img {
  width: 300px;
  height: 300px;
  object-fit: contain;
  background: #ddd; /* 余白部分の色 */
}

img の枠 300×300
+----------------------------+
|        余白 37.5px         |
+----------------------------+
|                            |
|   画像全体 300×225 で表示  |
|                            |
+----------------------------+
|        余白 37.5px         |
+----------------------------+

img 要素の大きさは実測で 300×300 のままです。その中に、比率を保った画像が収まります。4:3 の画像を正方形の枠に入れると、幅 300px に合わせて高さは 225px になり、上下に 37.5px ずつ余白ができます（余白の数値は枠と比率からの計算値です）。画像を切り取りたくないロゴや商品写真、図表に向いています。

枠いっぱいにトリミングする（object-fit: cover）

img {
  width: 300px;
  height: 300px;
  object-fit: cover;
}

拡大後の画像 400×300（比率を保ったまま枠を埋める）
+------+----------------------------+------+
| 切り |                            | 切り |
| 取り |   表示される範囲 300×300   | 取り |
| 50px |                            | 50px |
+------+----------------------------+------+

枠を隙間なく埋めるように画像が拡大・縮小され、はみ出した部分が切り取られます。この例では高さ 300px に合わせて画像が 400×300 相当になり、左右 50px ずつが見えなくなります（計算値）。サムネイル一覧やカードの画像など、大きさを揃えたい場面の定番です。

object-fit の値をまとめます。

この表の5つの値のうち、Chromium で要素の大きさを測ったのは fill・contain・cover です。none と scale-down の説明は仕様上の動きで、今回は未実行です。

切り取る位置を変える（object-position）

object-fit: cover は初期状態で中央を残します。人物の顔が上のほうにある写真などは、object-position で残す位置を指定します。

img {
  width: 400px;
  height: 200px;
  object-fit: cover;
  object-position: center top; /* 横は中央、縦は上を残す */
}

img の枠は実測で 400×200 でした。値は「横 縦」の順で、キーワード（left / center / right、top / center / bottom）のほか、50% 20% や 10px 0 のような数値も使えます。

正方形・16:9 に固定する（aspect-ratio）

aspect-ratio は、要素の縦横比を指定するプロパティです。幅だけ決めれば、高さは比率から計算されます。

/* 正方形のサムネイル */
.thumb {
  width: 200px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* 親の幅いっぱいの 16:9 */
.hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

3行目のとおり、width と height の両方が指定されていると aspect-ratio は使われません。「aspect-ratio が効かない」ときは、どこかで height が指定されていないかを確認します。また、aspect-ratio は枠の比率を決めるだけなので、画像の比率が枠と違う場合は object-fit: cover;（または contain）を一緒に書きます。

よく使う比率の一覧です。

高さは比率からの計算値です（16:9 の 225px は実測と一致）。

レスポンシブ対応（max-width: 100% と width: 100% の違い）

画面幅に合わせて画像を縮めるには、次の2行が基本です。

img {
  max-width: 100%;
  height: auto;
}

width: 100% と似ていますが、親が画像より大きいときの動きが違います。

max-width: 100% は「親より大きいときだけ縮める」、width: 100% は「常に親の幅に合わせる」指定です。元の解像度を超えて拡大すると画像がぼやけて見えるため、本文中の画像には max-width: 100% が合います。ヒーロー画像やカードの画像のように、常に幅いっぱいにしたい場所では width: 100% を使います。

画像が思いどおりに表示されないときの原因と直し方

親からはみ出す：max-width: 100% を指定する

修正前

.box { width: 400px; }
/* img には何も指定していない */

修正後

.box { width: 400px; }
img { max-width: 100%; height: auto; }

画像は、CSS で指定しなければ元のピクセル数どおりに表示されます。スマートフォンで横スクロールが出るときは、まず画像に max-width: 100% が当たっているかを確認します。サイト全体の画像に効かせるなら、CSSの先頭に次のように書いておくと安心です。

img, video {
  max-width: 100%;
  height: auto;
}

縦に伸びる（1）：HTML の height 属性と height: auto

img タグに width と height の属性を書いておくのは良い習慣ですが（理由は後述の CLS 対策）、CSS 側で height: auto を指定し忘れると、幅だけが縮んで高さが属性の値のまま残ります。

<div class="box">
  <img src="photo.png" width="800" height="600" alt="サンプル写真">
</div>

修正前（max-width: 100% のみ）   修正後（height: auto を追加）
+------------------+             +------------------+
|                  |             |                  |
|                  |             |   画像 400×300   |
|   画像 400×600   |             |                  |
|  （縦長に変形）  |             +------------------+
|                  |
|                  |
+------------------+

HTML の height 属性は「高さ 600px」という指定として働きます。CSS で height: auto と書くと、その指定が上書きされ、幅から高さが計算されるようになります。max-width: 100% と height: auto はセットで書くと覚えておくと確実です。CMS やエディタが自動で width・height 属性を付ける場合に、この症状がよく起きます。

縦に伸びる（2）：flex の stretch

display: flex の親に画像を直接入れると、隣の要素の高さに合わせて画像が引き伸ばされます。

<div class="box f">
  <img src="photo.png" alt="サンプル写真">
  <p>隣のテキスト（高さ500px）</p>
</div>

修正前

.f { display: flex; }
img { width: 200px; }

修正後

.f { display: flex; align-items: flex-start; }
img { width: 200px; }

flex の align-items は初期値が stretch で、子要素を親の高さいっぱいに伸ばします。親に align-items: flex-start（または center）を指定するか、画像だけ align-self で変えると元の比率に戻ります。

縦並び（flex-direction: column）では、同じ理由で横に伸びます。

flex の中の画像には、もう1つ「縮まずにはみ出す」という動きもあります。

flex の子要素は、初期状態では中身の大きさより小さくなりません。画像に min-width: 0 と max-width: 100% を指定すると、親の幅に合わせて縮むようになります。画像を div や figure で包み、その包みを flex の子にする方法も、挙動が素直で扱いやすいです。

画像の下に隙間ができる：inline のベースライン

画像を入れただけの箱の下に、数pxの隙間ができることがあります。

修正前

.box { width: 400px; background: #eee; }
img { width: 400px; }

修正後

.box { width: 400px; background: #eee; }
img { width: 400px; display: block; }

修正前                              修正後（display: block）
+------------------------+          +------------------------+
|                        |          |                        |
|       画像 400×300     |          |       画像 400×300     |
|                        |          |                        |
+------------------------+          +------------------------+
|  隙間 4px（背景が見える）|
+------------------------+

img は初期状態では inline（文字と同じ扱い）で、文字のベースライン（英字の下端の線）に揃えて置かれます。ベースラインの下には「g」や「y」の下に伸びる部分のための空間があり、それが隙間として見えます。親の文字サイズを 32px にすると隙間が 8px に増えたことからも、隙間の正体が文字のための空間だとわかります。

直し方は3通りありますが、display: block がもっとも副作用が少なくおすすめです。文章の途中に小さなアイコン画像を置く場合など、inline のまま使いたいときは vertical-align: bottom（または middle）を使います。line-height: 0 は、同じ親の中に文字があると行が重なるので、画像だけを入れる箱に限って使います。

画像の中央寄せ：4つの方法の使い分け

幅 200px（200×150）の画像を、幅 400px の親の中で中央に寄せます。「画像の位置」は親の左上を基準にした実測値です。

margin auto が効かないときは display: block を確認する

/* 中央に寄らない */
img { width: 200px; margin: 0 auto; }

/* 中央に寄る */
img { width: 200px; display: block; margin-inline: auto; }

margin: auto による中央寄せは、block の要素にだけ働きます。img は初期状態が inline なので、display: block を足すと中央に寄ります。margin-inline: auto は左右の margin だけを auto にする書き方で、上下の余白に影響しません。

上下左右の中央に置く

/* flex */
.box {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* grid（より短い） */
.box {
  height: 300px;
  display: grid;
  place-items: center;
}

どちらも画像の位置は（100, 75）で、高さ 300px の親の上下左右中央になりました。align-items: center を指定しているため、前述の stretch による縦伸びも起きません。画像を別の要素に重ねて中央に置きたい場合は、次の書き方も同じ位置（100, 75）になることを確認しています。

.box { position: relative; height: 300px; }
img  { width: 200px; position: absolute; inset: 0; margin: auto; }

「要素の位置」と「枠の中の絵の位置」を区別する

margin・flex・grid は img 要素そのものを動かす方法、object-position は img の枠の中で絵のどこを見せるかを決める方法です。「トリミングした写真の顔が切れてしまう」という悩みは、中央寄せではなく object-position で解決します。

width / height 属性でレイアウトのずれ（CLS）を防ぐ

CLS（Cumulative Layout Shift）は、ページの読み込み中に要素の位置がずれる量を表す指標です。画像は読み込みが終わるまで大きさがわからないため、何もしないと、読み込み後に下の文章が押し下げられます。

画像の読み込みを意図的に遅らせ、読み込み前後の「画像の高さ」と「下にある段落の位置」を測りました。CSS は img { max-width: 100%; height: auto; }、親の幅は 400px です。

<img src="photo.png" width="800" height="600" alt="サンプル写真">

img { max-width: 100%; height: auto; }

width と height の属性を書くと、ブラウザはその2つの数値から縦横比を求め、読み込み前から場所を確保します。Chromium で計算後のスタイルを見ると、属性ありの画像は aspect-ratio: auto 800 / 600、属性なしは auto になっていました。属性の数値は「表示したい大きさ」ではなく「元画像のピクセル数」を書けば十分で、実際の表示サイズは CSS の max-width: 100%; height: auto; が決めます。

この3つが揃うと、「はみ出さない」「縦に伸びない」「読み込み中にずれない」をまとめて満たせます。

コピペ用：画像まわりの基本セット

サイト全体に効かせる基本の指定と、よく使う部品をまとめました。

/* 1. すべての画像の基本（はみ出し・縦伸び・下の隙間を防ぐ） */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 2. 本文中の画像を中央に */
.img-center {
  margin-inline: auto;
}

/* 3. 大きさを揃えたサムネイル（正方形） */
.thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* 4. 16:9 のカード画像・ヒーロー画像 */
.cover-16x9 {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

/* 5. 切り取らずに枠へ収める（ロゴ・図表） */
.fit-contain {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #f3f3f3;
}

/* 6. 文章の途中に置く小さなアイコン */
.icon-inline {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

<figure>
  <img class="img-center" src="photo.png" width="800" height="600" alt="サンプル写真">
  <figcaption>キャプション</figcaption>
</figure>

<ul class="cards">
  <li><img class="thumb" src="a.png" width="800" height="600" alt="記事Aのサムネイル"></li>
  <li><img class="thumb" src="b.png" width="600" height="900" alt="記事Bのサムネイル"></li>
</ul>

この基本セットのうち、1 は「はみ出し」「height 属性」「下の隙間」の各節で、3 と 4 は aspect-ratio の節で、2 は中央寄せの節で、同じ指定の組み合わせを実測しています。5 と 6 も、縦長（600×900 の属性付き）の画像に .fit-contain を当てると枠が 400×300、文字サイズ 16px の段落内で .icon-inline が 16×16 になることを確認しました。同じ縦長の画像に .thumb を当てた場合は 400×400 の正方形になります。なお、figure の中に width: 100%; height: auto; display: block; の画像を入れ、figure の幅を 240px にした場合は、画像が 240×180 になることを確認しました。

幅の単位の選び方

width に使う単位は、何を基準に大きさを決めたいかで選びます。

px・%・em の例は、この記事の実測（300×225、200×150、16×16）と対応しています。vw と「上限つき」の行は書き方の紹介で、今回の計測には含めていません。固定の px で幅を決めた場合も max-width: 100% を併記しておくと、狭い画面で親をはみ出すことがなくなります。

指定する前のチェックリストです。

よくある質問

Q. 画像の縦横比を保ったままサイズを変えるにはどうすればよいですか？ A. width か height の片方だけを指定します。width: 300px; なら高さは自動で 225px（4:3 の場合）になります。HTML に height 属性がある場合は、CSS に height: auto; を足してください。枠の大きさを先に決めたい場合は、object-fit: contain（全体を収める）か cover（切り取って埋める）を使うと比率が保たれます。

Q. object-fit と aspect-ratio はどう使い分けますか？ A. 役割が違うので、組み合わせて使います。aspect-ratio は img の枠の比率を決め、object-fit はその枠に対して画像をどう収めるかを決めます。たとえば「幅は親に合わせ、16:9 でトリミング」なら width: 100%; aspect-ratio: 16 / 9; object-fit: cover; です。

Q. object-fit が効かないのはなぜですか？ A. object-fit は、img の枠の大きさと画像の比率が違うときに働きます。width だけを指定して height が auto のままだと、枠が画像と同じ比率になるため、見た目は変わりません。height か aspect-ratio を指定して枠の比率を決めると効果が現れます。また、指定先は img 要素自身です（親の div ではありません）。

Q. 背景画像（background-image）と img はどちらを使えばよいですか？ A. 内容として意味のある写真や図は img（alt で内容を伝えられ、width・height 属性で場所を確保できます）、飾りの模様や背景は background-image が向いています。以前は「枠いっぱいにトリミング」のために背景画像を使う方法が多く見られましたが、現在は img に object-fit: cover を指定すれば同じ見た目を作れます。

まとめ

• 基本は「width だけ指定、height は auto」。片方だけ指定すれば縦横比は自動で保たれる（width: 300px → 300×225）。
• レスポンシブは max-width: 100%; height: auto; の2行。width: 100% は小さい画像も拡大する（親 1000px で 800×600 と 1000×750 の違い）。
• 枠に収めるなら object-fit: contain、枠いっぱいに切り取るなら cover。比率を固定するなら aspect-ratio と組み合わせる。
• 縦に伸びる原因は、height 属性（400×600）と flex の stretch（200×500）。height: auto と align-items: flex-start で直る。
• 下の 4px の隙間は inline のベースラインが原因。display: block で消える。
• 中央寄せは display: block; margin-inline: auto;。上下左右なら親を display: grid; place-items: center;。切り取り位置は object-position。
• HTML に width・height 属性を書くと、読み込み前から高さが確保され、ずれが 286px から 0px になった。

株式会社RJCでは、CSSでの画像サイズ指定やレイアウトの基本を仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。