画像をレイアウトにきれいに収めたいと思っても、「引き伸ばされる」「上下が切れてしまう」など、思ったように表示されないことはありませんか？
そんなときに便利なのが CSSの object-fit プロパティです。
画像や動画の見せ方を整えたいときに役立つ、基本的な使い方と注意点を初心者向けにやさしく解説します。

object-fitとは？

object-fitは、画像や動画などの「中身」を、指定したサイズの枠にどう収めるかを制御するCSSプロパティです。
主に<img>や<video>タグに対して使用され、デザインを崩さずにきれいな表示を実現できます。

代表的な指定値と特徴

基本的な使用例

① contain（全体を縮小して表示）

画像全体を見せたいときにおすすめ。縦横比を保ったまま、収まるように調整されます。

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

② cover（枠ぴったりに表示・切り抜きあり）

表示枠をしっかり埋めたいときに最適。画像の一部が切り取られる可能性がありますが、見た目が整いやすいです。

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

③ fill（縦横を無視して強制フィット）

枠の形に強引に合わせるため、画像がゆがんで見えることがあります。アイコンなどに使うケースはありますが、注意が必要です。

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

④ none（元のサイズそのまま）

サイズ変更をせず、元画像の表示に任せたい場合に使用します。

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

⑤ scale-down（小さい方を自動で選択）

noneとcontainのうち、より小さいサイズで表示してくれます。

img {
  width: 300px;
  height: 200px;
  object-fit: scale-down;
}

初心者が気をつけたいポイント

• 画像ファイル自体は加工されない：見た目だけが変化します
• widthとheightの指定が必要：これらがないとobject-fitは効果を発揮しません
• レスポンシブ時の扱い：max-width: 100%やheight: autoと組み合わせると崩れにくくなります

よく使われる実践シーン

• ギャラリーのサムネイル画像を整える
• ニュース一覧のアイキャッチを揃える
• プロフィール画像を枠内にきれいに収める

おわりに

object-fitを使うことで、画像や動画をレイアウトにきれいに合わせることができます。
特にcontainとcoverは使用頻度が高いので、それぞれの違いを実際に試して感覚をつかんでみましょう。

今後は、object-positionなどと組み合わせることで、さらに細かな調整も可能になります。ぜひ一歩先の演出にもチャレンジしてみてください！