Object Fit と Object Position
問題
画像や動画を固定サイズのコンテナに配置すると、置換要素（replaced elements）のデフォルトが object-fit: fill であるため、引き伸ばされたり歪んだりします。開発者はしばしば <div> の background-image に切り替えることで回避しますが、これによりセマンティクス、アクセシビリティ（alt テキスト）、ネイティブの遅延読み込み、SEOのインデックス対象としての認識が失われます。<img> や <video> 要素に対する正しい解決策は object-fit です。HTMLを放棄せずにコンテンツのフィル方法を制御できます。
解決方法
object-fit は、置換要素のコンテンツがコンテナに合わせてどのようにリサイズされるかを制御します。背景画像に対する background-size と同じように動作しますが、実際の <img>、<video> などの置換要素に適用されます。object-position はコンテンツの要素ボックス内での配置を制御し、焦点を選択できます。
基本原則
object-fit の値
fill（デフォルト）— ボックスにぴったり合うようにコンテンツを引き伸ばします。アスペクト比を無視します。写真にはほぼ不適切です。contain— アスペクト比を維持しつつ、コンテンツがボックス内に完全に収まるようにスケーリングします。余白（レターボックス）が生じることがあります。cover— アスペクト比を維持しつつ、コンテンツがボックス全体をカバーするようにスケーリングします。画像の一部がクリップされることがあります。none— リサイズなし。コンテンツは固有のサイズで表示されます。はみ出した部分はクリップされます。scale-down—noneまたはcontainのうち、より小さい結果を生むものとして動作します。拡大を防ぎます。
object-position
background-position とまったく同じように動作します。キーワード値（top、center、right）、パーセンテージ、または長さの値を受け付けます。デフォルトは 50% 50%（中央揃え）です。object-fit: cover で画像がクリップされる際に、どの部分を表示するかを制御するのに使います。
aspect-ratio との関係
aspect-ratio プロパティはボックスの比率を定義し、object-fit はコンテンツがそのボックスをどう埋めるかを制御します。両者は連携して動作します：要素に aspect-ratio を設定してコンテナの形状を定義し、object-fit で画像コンテンツの適応方法を制御します。
img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
これにより、常に16:9のフレームを維持しつつ、内部の写真がエッジまで埋まるレスポンシブな画像が得られます。
ライブプレビュー
クイックリファレンス
| シナリオ | CSS |
|---|---|
| 画像がコンテナを埋め、比率を維持、端をクリップ | object-fit: cover |
| 画像がコンテナ内に収まり、レターボックスあり | object-fit: contain |
| 画像を固有サイズのまま、リサイズなし | object-fit: none |
| 固有サイズ以上に拡大しない | object-fit: scale-down |
| cover でクリップされる際の焦点を制御 | object-position: top または object-position: 25% 75% |
| cover を使ったレスポンシブ16:9フレーム | aspect-ratio: 16/9; object-fit: cover |
| 任意のアスペクト比からの円形アバター | border-radius: 50%; object-fit: cover |
AIがよくやるミス
object-fitの代わりにbackground-imageを使う。 コンテンツが意味のある画像（装飾ではない）である場合は、<img>とobject-fitを使いましょう。background-imageは純粋に装飾的な背景にのみ使います。- 画像に明示的なサイズを設定し忘れる。
object-fitは、要素のボックスサイズがコンテンツの固有サイズと異なる場合にのみ効果があります。<img>にwidthとheight（またはaspect-ratio）を設定しましょう。 - カード内の画像に
display: blockを設定しない。 インライン画像はベースライン揃えにより下部に小さな隙間が生じます。display: blockを追加して解消しましょう。 - 意図的に
object-fit: fillを使う。fillはデフォルトで画像を引き伸ばします。明示的にobject-fit: fillを設定している場合、画像が歪みます。coverまたはcontainを使いましょう。 coverを使う際にobject-positionを無視する。 デフォルトの中央揃えは画像の間違った部分をクリップする可能性があります。object-positionで表示する部分を制御しましょう。aspect-ratioとobject-fitを組み合わせない。width: 100%のみを設定し、aspect-ratioや固定のheightを指定しないと、画像ボックスは固有の比率に従うため、object-fitが不要になります。