画像のobject-fitの使い方！CSSで写真を好きなサイズにフィットさせる方法

Webサイトで画像を使うとき、枠からはみ出したり縦横比が崩れてしまったりして、思ったように表示されないことがあります。それを解決するのがCSSのobject-fitです。画像を切り抜いたり、枠いっぱいに表示したり、割合を保ったまま縮小したりできるようになります。この記事では使い方をしっかり理解して、見た目の整ったレイアウトを実現する方法を解説します。

画像 object-fit 使い方 の基本とは

object-fitはHTMLの&lts;img>や<video>など、「replaced element（置き換え要素）」に適用できるCSSプロパティで、コンテンツがそのコンテナにどのようにフィットするかを制御するものです。通常、幅と高さが指定された要素の中で、画像がどのように拡大・縮小・切り抜かれるかを指定できます。縦横比を保ったまま枠に収めるcontain、枠を完全に覆うcover、縦横比を無視してストレッチするfill、サイズが小さいなら縮小、それ以外はnoneなどの値があります。最新のブラウザでは幅広くサポートされており、古い環境ではフォールバックが必要な場合があります。

object-fitプロパティとは何か

object-fit は画像や動画のような置き換え要素の中で、コンテンツが枠（content box）に対してどう収まるかを指定するCSSです。通常、画像に width と height を指定すると、その枠に合わせて表示されますが、そのままでは縦横比が歪んだり余白ができたりします。object-fit によってその挙動を細かく制御できます。

指定できる値の種類と特徴

object-fitで指定できる主な値は以下の五つです。
それぞれ特徴があり、用途によって使い分けが必要です。

• fill：枠を埋めるために縦横比を無視して拡大・縮小します。歪みが発生する可能性があります。
• contain：画像全体を表示するために縮小または拡大し、縦横比を保持します。枠内に収まるが余白ができる可能性があります。
• cover：枠を完全に覆うように拡大または縮小し、縦横比を保持します。枠を超える部分は切り抜かれます。
• none：サイズ変更をせず、元のサイズのままで表示します。枠から溢れることがあります。
• scale-down：noneまたはcontainのうち、結果的に小さくなる方が適用されます。大きすぎる画像を縮小したいときに便利です。

適用の前提条件と注意点

object-fit が期待通りに機能するには、いくつかの前提条件や注意点があります。まず、画像要素に width と height が明示的に指定されている必要があります。どちらかが欠けていると、ブラウザが自然サイズを使ってしまい、object-fit の効果が得られません。また、切り抜きが発生する cover の場合、重要な部分が見切れないように注意することが大切です。さらに、Internet Explorerなどの古いブラウザではサポートされていないためフォールバックを用意する必要があります。

画像 object-fit 使い方 を具体例で試す

object-fit の各値が実際にどのように動作するのかをコード例で見ていきます。枠のサイズや比率を変えて比較すると、どの値がどんな場面に適しているか把握できます。ここではいくつか典型的なレイアウトに対して object-fit を適用する方法を紹介します。

カード型レイアウトで使う cover と contain の比較

例えば商品カードのヘッダー部分に画像を表示する場合、枠サイズが固定されていて、その中で画像をきれいに見せたいですが画像の比率がバラバラということがあります。
cover を使えば枠全体が埋まり、左右または上下が切り抜かれても視覚的に統一された見た目になります。
contain を使うと比率は保たれますが余白（letterbox／pillarbox）ができることがあります。どちらを選ぶかはデザイン次第です。

アイコンやロゴなど詳細を見せたい画像での contain の使いどころ

ロゴやアイコン、図表など、画像の全体を見せることが重要なものでは contain が適しています。枠に収まるように拡大縮小されつつ、どこかが切れたりすることはありません。余白ができることがありますが、背景色や背景を含めてデザインを整えることで自然な見た目にできます。

背景風に使う hero セクションで cover を使う方法

ウェブページのヒーローイメージ（画面幅いっぱいに広がる大きな画像など）では cover がよく使われます。幅100％／高さを viewport 高や固定高さにして、その枠を完全に覆うように画像を表示します。重要なのは、どの部分を見せるかを object-position で調整することです。顔やテキストが切れないように top center や left center などを使います。

scale-down と none の使い分け

画像サイズがまちまちで、小さい画像はそのまま表示したい、大きい画像は枠に収めたいという場合に scale-down が役立ちます。none は拡大・縮小をしないため、枠サイズ以上の部分は隠れたり溢れたりします。これを使う際も object-position を併用してどの位置を見せたいか調整することが重要です。

CSS で画像 object-fit 使い方 によるコード例と実践テクニック

ここでは実際のHTML・CSSコード例を示し、object-fit を使った実践テクニックを解説します。レスポンシブレイアウト、Flexbox／Gridを使った例、アニメーションとの組み合わせなど、多様なシーンの使い方を学びます。

基本的なコード構造と記述のポイント

要素を使う場合、width と height を指定することが前提です。例えば幅100％と高さ200pxなど枠を決めるとき、CSSで
img { width: 100%; height: 200px; object-fit: cover; }と書けば、枠全体が埋まりつつ切り抜きが起きます。枠の比率が画像と異なるときの見栄えに注意し、object-positionで焦点を調整します。

レスポンシブ環境での対応例

スマホやタブレットなど、画面幅が変わる環境では、width を百分率か viewport ユニットにしておき、高さもそれに応じて変動させると良いです。例えばヒーローバナーなら高さを画面の50vhなどに設定し、object-fit: cover を使うと見た目が美しくなります。また、レスポンシブ画像（srcset や sizes）を使うと読み込みの最適化にもなります。

Flexbox や Grid に組み込んで使う方法

画像が Flexbox や Grid のアイテムとして配置される場合、親要素の幅・高さが決まっているか、ある程度見積もれることが重要です。子要素に img を置いて
width:100%; height:100%; object-fit: cover;と指定すれば、グリッドやフレックスのセルいっぱいに画像がきれいに収まります。余白ができるのが許されるなら contain、完全に均一に見せたいなら cover を選びます。

object-position を併用して焦点を調整する方法

画像を cover などで切り抜くときに、どの部分が表示されるかを object-position で指定できます。キーワード（top／left／centerなど）や百分率で水平・垂直の位置を決めます。例えば顔部分を切り抜かないように top center を使ったり、横長の建物の中央部分を見せるために50% 0%などとすることができます。

互換性とフォールバックの準備：画像 object-fit 使い方 の注意

object-fit は多くのモダンブラウザでサポートされていますが、完全ではありません。特に Internet Explorer ではサポートされておらず、モバイルの古いバージョンでも不具合が起きることがあります。そのため、フォールバックや代替手段を準備してユーザー体験を損なわないようにすることが重要です。

ブラウザサポート状況の把握

現在、主要なブラウザ（最新の Chrome、Firefox、Safari、Edge）では object-fit の五つの値が全てサポートされています。Internet Explorer はサポート外です。古いバージョンの iOS Safari や Android ブラウザでも問題が出ることがあるため、ユーザー層に応じて検証が必要です。

フォールバック手法の代表例

フォールバックとして、背景画像（background-image）を使用して background-size や background-position を使う方法があります。image をコンテンツとして使いたい場合は alt 属性をしっかり書き、CSS でフォールバック用のクラスを用意するのが良いです。Polyfill を導入する選択肢もあります。

パフォーマンスと表示シフト（CLS）の対策

画像に width と height を属性または CSS で明示することで、ブラウザがレイアウトの予約スペースを確保でき、Cumulative Layout Shift を防ぎやすくなります。遅延読み込み（lazy loading）や適切な画像サイズ（レスポンシブ画像）を併用すると表示速度と体験がよくなります。object-fit 自体は描画コストが低く、画像ロードには影響しません。

アクセシビリティ上の配慮

cover で一部を切り抜くとき、重要な情報（顔、文字、ロゴなど）が見えなくなる可能性があります。alt テキストを適切に書いたり、画像のフォーカスポイントを意図的に位置指定したりすることで、視覚・非視覚どちらのユーザーにも配慮することができます。

応用例：画像 object-fit 使い方 を発展させるTips

ここまで基本と実践的な使い方を紹介しましたが、さらに一歩進めてデザインの質を上げるための応用的なテクニックをお伝えします。現場で使える工夫やパターンを知ることで、よりプロフェッショナルな見せ方が可能になります。

動的に object-fit の値を切り替える方法

画像の縦横比が動的に変わるケースでは、CSS だけでなく JavaScript を使って条件によって contain と cover を切り替える手法があります。例えば、画像の自然幅・高さを読み取って縦横比を判定し、それに応じてクラスを切り替えて object-fit の値を変えることで、最適な見せ方を自動で選べます。

hover 時の視差やズーム効果と組み合わせる

object-fit と object-position を transition や transform と組み合わせて、ホバー時にズームイン・ズームアウト・パンをするエフェクトを作ることができます。例えば、普段は object-fit: cover; object-position: center center; にしておき、マウスオーバーで object-position を center top に変えることで印象的な動きを演出できます。

複数画像や写真ギャラリーで統一感を出すために

写真ギャラリーやカード群など複数の画像が並ぶレイアウトでは、全ての画像に同じ枠サイズと同じ object-fit の設定を適用すると統一された見た目になります。比率の異なる画像を用いる場合でも、cover か contain を統一し、余白の背景色を揃えることが重要です。

まとめ

画像 object-fit を正しく使いこなすと、デザインの見た目が格段に向上します。枠サイズと比率、どの部分を見せたいかを理解し、cover、contain、fill、none、scale-down の中から最適な値を選ぶことで、画像の切り抜きやゆがみを防げます。レスポンシブ対応、パフォーマンス対策、アクセシビティも併せて配慮することで、ユーザーにとって快適で魅力的なサイトが作れます。