object-position
object-position は CSS のプロパティで、ボックス内における置換要素の中身の配置を指定します。ボックスの領域内で置換要素のオブジェクトに覆われていない部分は、要素の背景が表示されます。
置換要素のオブジェクトの内在サイズ（すなわち、自然なサイズ）を、その要素のボックス内に合わせる方法を調整するために、object-fit プロパティを使用することができます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 32 | 79 | 36 | 10 | 32 | 10 | |
注釈 3件
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (79)
実装メモ
- `<img>` 要素でのみサポートされます。
基本構文
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によって切れていないことを確認し、代替テキストで画像の全体の内容を説明してください。