Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。
その他 Widely available

object-position

imgやvideo要素などの置換要素の表示位置をボックス内で調整するプロパティです。object-fitと組み合わせて、切り抜かれた画像の焦点位置を制御したり、動画の表示エリアを調整したりできます。背景画像のbackground-positionに相当する機能を、foreground画像に対して提供します。

画像配置オブジェクト位置

概要

imgやvideo要素などの置換要素の表示位置をボックス内で調整するプロパティです。object-fitと組み合わせて、切り抜かれた画像の焦点位置を制御したり、動画の表示エリアを調整したりできます。背景画像のbackground-positionに相当する機能を、foreground画像に対して提供します。

対応ブラウザ

デスクトップ

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

モバイル

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

基本構文

CSS 
.avatar {
  object-fit: cover;
  object-position: top center;
}
.hero-image {
  object-fit: cover;
  object-position: 50% 30%;
}

実務での使いどころ

  • プロフィール画像の焦点調整

    アバター画像をobject-fit: coverで切り抜く際に、顔が中央上部に来るようobject-positionで焦点を調整します。

注意点

  • object-positionはobject-fitと組み合わせて使用する場合に最も効果を発揮します。object-fit: fillの場合はobject-positionの効果がありません。

アクセシビリティ

  • 画像の重要な部分がobject-positionによって切れていないことを確認し、代替テキストで画像の全体の内容を説明してください。

参考リンク