object-fit

object-fit は、画像や動画などの置き換え要素が、その親要素の枠内でどのように表示されるか（サイズ調整やトリミング）を指定するCSSプロパティです。 CSS3のobject-fit属性の簡単な解説 object-fit は、置き換え要素（例えば <img>, <video>, <canvas>）のコンテンツがそのコンテナ内でどのようにフィットするかを指定するためのプロパティです。要素の枠内での画像や動画の表示方法を制御します。 文法 サンプル html CSS： さまざまなobject-fitの値を試してみましょう object-fit の値 説明 視覚的な効果の説明 fill 引き伸ばしてコンテナに合わせる 画像が変形する可能性があります contain 縦横比を保って完全に表示 画像全体が表示され、余白ができることがあります cover 縦横比を保ってコンテナを覆う 画像がはみ出して一部が切れることがあります none 元のサイズのまま表示 画像は縮小・拡大されず、はみ出した部分は隠れます scale-down 元のサイズかcontainの小さい方 画像が大きい時だけ縮小し、それ以外は元サイズ表示 注意点・補足 Web制作現場でよくある質問（FAQ） Q1: object-fitとbackground-sizeの違いは？ A1: object-fit は <img> などの置き換え要素に使い、画像の表示方法を制御する。一方、background-size は背景画像に対して適用する。 Q2: IEでの対応方法は？ A2: IE非対応のため、JavaScriptでの代替処理や背景画像を使う方法が一般的。 IEに対応したcover効果の実装 Q3: object-fit: scale-down はどういう時に使う？ A3: 画像がコンテナより大きい時だけ縮小し、小さい時は元サイズのまま表示したい場合に便利。 まとめ（まとめ） object-fit は画像や動画の表示制御に非常に便利なプロパティ。 contain は全体表示、cover はトリミングしてコンテナいっぱいに表示するのに適している。 ブラウザサポートを考慮して使い分けよう。