Web制作をしていると、「画像サイズはバラバラ、でもサムネイルの枠は固定したい、しかもはみ出させたくない」という場面によく出くわします。画像の縦横比を保ったまま、決まった枠の中にきれいに収めたい——そんなときの定番テクニックです。

結論から言うと、画像にobject-fit: containを指定するだけで、縦横比を保ったまま親要素内に最大サイズで収められます。この記事では、基本の使い方から位置の調整、coverとの違いまでを解説します。

完成イメージ

枠のサイズを幅200×高さ100pxに固定し、縦横比がバラバラの画像を、はみ出させずに縦横比を保ったまま、できるだけ大きく表示する——これが今回のゴールです。

結論：object-fit: contain を使う

HTMLは、枠となる要素の中に画像を入れるだけです。

<div class="thumb">
  <img src="sample.jpg" alt="">
</div>

CSSでは、枠のサイズを固定し、画像を枠いっぱい（width・heightともに100%）に広げたうえでobject-fit: containを指定します。

.thumb {
  width: 200px;
  height: 100px;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

何が起きているのか

ポイントは、widthとheightで画像を枠のサイズいっぱいに引き伸ばしておき、object-fit: containで「縦横比を保ちながら枠の中に収める」ように制御している点です。

object-fit: containを指定すると、画像は縦横比を維持したまま、親要素からはみ出さない最大サイズで表示されます。つまり、枠に対して縦長の画像なら高さいっぱいに、横長の画像なら幅いっぱいに、それぞれ「いい感じに収まる」状態になります。object-fitを指定しないと画像が枠のサイズに引き伸ばされて歪んでしまうため、この一行が要になります。

なお、object-fitはimgやvideoなどの「置換要素」に効くプロパティで、幅・高さが指定されていて初めて機能します。今回のようにwidth・heightを100%にして枠のサイズを持たせるのがセットだと覚えておきましょう。背景画像として扱う場合は、object-fitではなくbackground-size: contain／coverが同じ役割を果たします。imgタグならobject-fit、CSSの背景画像ならbackground-size、と対応させておくと混乱しません。

余白の位置を調整したい場合

containでは縦横比を保つぶん、枠と画像の間に余白が生まれます。この余白の寄せ方はobject-positionで調整できます。たとえば左寄せなら次のように指定します。

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

右寄せならobject-position: right center;、上寄せならobject-position: center top;と、値を変えるだけで寄せる方向を指定できます。ロゴ一覧などで「左揃えに並べたい」といったときに便利です。

余白なしで枠いっぱいにしたい場合

逆に「余白を出したくない、枠いっぱいに敷き詰めたい」場合は、object-fit: coverを使います。

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

ただしcoverの場合は、枠に合わせて画像の一部がトリミングされます。全体を見せたいならcontain、枠をきっちり埋めたいならcover、と目的で選び分けます。

contain と cover の違い

プロパティ	特徴
contain	はみ出さない（余白あり）
cover	余白なし（トリミングあり）

どちらも縦横比を保つ点は同じで、違いは「全体を収めるか（contain）」「枠を埋めるか（cover）」です。画像の全体像を必ず見せたい実績一覧やロゴにはcontain、見栄え重視のメインビジュアルやカードの背景にはcover、といった使い分けが目安になります。枠自体の縦横比をレスポンシブで固定したい場合は、aspect-ratioプロパティと組み合わせると、画面幅が変わっても枠の形を保ったまま画像を収められます。

まとめ

• 枠内に縦横比を保って収めたい → object-fit: contain
• 余白の位置を調整したい → object-position
• 余白なしで枠いっぱいにしたい（トリミング可） → object-fit: cover

画像サイズがバラバラでも、object-fitを使えばサムネイル一覧や商品画像、実績一覧、カードUIなどをすっきり整えられます。「画像がガタガタして揃わない」という悩みは、これで解決できます。