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

object-fit

object-fit は CSS のプロパティで、置換要素、例えば <img> や <video> などのコンテンツを、コンテナーにどのようにはめ込むかを設定します。

メモ: object-fit プロパティは、<iframe>、<embed>、<fencedframe> の各要素では効果がありません。

要素のボックス内における置換要素の中身のオブジェクトの配置を変更するには、 object-position プロパティを使用することができます。

メディアサイジング

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
object-fit
32
79
36
10
32
10
contain
32
79
36
10
32
10
cover
32
79
36
10
32
10
fill
32
79
36
10
32
10
none
32
79
36
10
32
10
scale-down
32
79
36
10
32
10
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (79)
実装メモ
  • `<img>` 要素でのみサポートされます。

基本構文

CSS 
/* Crop while maintaining aspect ratio */
.thumbnail {
  width: 200px;
  height: 200px;
  object-fit: cover;
  object-position: center;
}

/* Fit within the container while maintaining the aspect ratio */
.gallery-image {
  width: 100%;
  height: 300px;
  object-fit: contain;
}

ライブデモ

object-fit: cover

object-fit Object-fit: cover demo.

プレビュー全画面表示

object-fit: contain

object-fit Object-fit: contain demo.

プレビュー全画面表示

object-fit: fill

object-fit Object-fit: fill demo.

プレビュー全画面表示

実務での使いどころ

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

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

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

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

注意点

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

アクセシビリティ

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

参考リンク