CSSのobject-fitプロパティ徹底解説！5つの値で画像表示を自在にコントロール

CSSのobject-fitプロパティは、要素をコンテナの幅と高さの範囲内に収まるように拡大・縮小するためのプロパティです。開発者がこのプロパティを扱う場面として最も一般的なのが、背景画像やコンテナ内の画像の調整でしょう。

object-fitで指定できる5つの値

object-fitプロパティには5つの値があります。ここでは画像を例に、それぞれの値の違いをわかりやすく解説します。

object-fit: contain

containを指定すると、コンテナに収める要素（この場合は画像）のアスペクト比（縦横比）が維持されます。コンテナとアスペクト比が一致しない場合、余白が生じた側にバー（帯）が表示されます。ワイド画面の動画を古いテレビで再生したとき、画面の上下に黒帯が現れるのと同じイメージです。

object-fit: cover

coverは、アスペクト比を維持したままコンテンツボックス全体を埋めます。アスペクト比が一致しない場合は、収まるように画像がトリミング（切り抜き）されます。

object-fit: fill

fillは、元のアスペクト比と一致しているかどうかにかかわらず、画像を要素のコンテンツボックスいっぱいに表示します。そのため、画像が引き伸ばされて表示されることがあります。

object-fit: none

noneを指定すると、画像は元のサイズのまま表示されます。コンテナのサイズによっては、画像がはみ出してしまう場合もあります。

object-fit: scale-down

scale-downは、noneとcontainのうち、結果として画像サイズがより小さくなる方を自動的に選択します。この例では、scale-downはcontainを選択しています。

ブラウザの対応状況

このプロパティは主要なブラウザで幅広くサポートされています。ただし、古いInternet ExplorerやMicrosoft Edge、Opera向けに開発する場合は、事前に対応状況を確認しておきましょう。

まとめ

この記事では、object-fitプロパティについて解説しました。このプロパティは、コンテナ内に挿入して中身を埋める要素に使用され、<img>タグなどの置換要素に直接指定することで、画像がコンテナをどのように埋めるかを制御できます。さらに、object-positionプロパティと組み合わせれば、コンテナ内での要素の表示位置も細かく調整可能です。レスポンシブデザインが主流の現在、画像を美しく表示するためにぜひ活用してみてください。