画像を親要素内に収めて縦横比そのままで最大表示する方法

Web制作をしていると、

• 画像サイズがバラバラ
• サムネイルの枠（親要素）サイズは固定したい
• でも画像ははみ出させたくない

こんなケース、よくありますよね。

今回は
「画像の縦横比を保ったまま、親要素内で最大表示する方法」 を解説します。

完成イメージ

• 枠サイズ：W200 × H100px
• 画像：縦横比バラバラ
• はみ出さない
• 縦横比を保持したままできるだけ大きく表示

結論：object-fit: contain を使う

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

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

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

何が起きているのか？

object-fit: contain を使うと

• 縦横比を維持する
• 親要素内に収める
• 最大サイズで表示される

つまり
「いい感じに収まる」状態になる

左寄せ・右寄せしたい場合

▼ 左寄せ

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

▼ 右寄せ

object-position: right center;

▼ 上寄せ

object-position: center top;

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

もし「余白を出したくない」なら

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

ただしこの場合は
画像が親要素のサイズに収まるように一部トリミングされます

contain と cover の違い

こんな場面で使える

• サムネイル一覧
• 商品画像
• 実績一覧
• カードUI

まとめ

• 枠内に収めたい → object-fit: contain
• 余白の位置調整 → object-position
• 枠いっぱいにしたい → object-fit: cover

画像サイズがバラバラでも、この方法を使えば一発で整います。

「なんか画像がガタガタする…」問題はこれで解決です。

IPPEI FUKUTA

名古屋の Web 制作会社で 9 年半働いた後フリーランスに。中小企業のWEBサイト制作実績 120 サイト以上。ディレクション、デザイン、コーディング、WordPress 構築まで手掛けます。Web制作に関わる情報やワーケーション日記などを執筆しています。