Widely available YES。全主要ブラウザで対応済み。画像・動画のサイズ制御に標準的な手法。
レイアウト Widely available

object-fit

画像や動画をコンテナに収める際、アスペクト比を維持しつつトリミングしたい場合や、コンテナに完全にフィットさせたい場合がある。object-fit はこの挙動を CSS で宣言的に制御する。background-size の cover/contain と同様の概念を img 要素などにも適用できる。

メディアサイジング

概要

画像や動画をコンテナに収める際、アスペクト比を維持しつつトリミングしたい場合や、コンテナに完全にフィットさせたい場合がある。object-fit はこの挙動を CSS で宣言的に制御する。background-size の cover/contain と同様の概念を img 要素などにも適用できる。

対応ブラウザ

デスクトップ

Chrome 32+
Edge 79+
Safari 10+
Firefox 36+

モバイル

Chrome Android 32+
Safari iOS 10+
Firefox Android 36+

基本構文

CSS 
/* アスペクト比を維持してトリミング */
.thumbnail {
  width: 200px;
  height: 200px;
  object-fit: cover;
  object-position: center;
}

/* アスペクト比を維持してコンテナ内に収める */
.gallery-image {
  width: 100%;
  height: 300px;
  object-fit: contain;
}

実務での使いどころ

  • サムネイル画像の統一サイズ

    異なるアスペクト比の画像を同一サイズのコンテナに収め、object-fit: cover で美しくトリミングする。

  • 動画のレスポンシブ表示

    動画をコンテナいっぱいに表示しつつ、アスペクト比を崩さないレスポンシブな表示を実現する。

注意点

  • object-fit: cover はトリミングが発生するため、被写体の重要な部分が切れる場合がある。object-position で焦点位置を調整する。
  • object-fit は置換要素（img, video, iframe 等）にのみ有効。div 等の通常要素には効果がない。

アクセシビリティ

  • トリミングされた画像は alt テキストに画像の完全な説明を含めること。視覚的に見えない部分の情報が失われないよう配慮する。

参考リンク