object-position
背景・装飾object-fitと組み合わせて使用し、画像や動画などの置換要素の位置を調整するプロパティです。top、center、bottom、left、right等のキーワードや%、pxで指定でき、アスペクト比を維持しながら表示位置を制御します。
構文
Syntax
object-position: <position>Tailwindでは
| object-center | object-position: center |
| object-top | object-position: top |
任意値: object-[25%_75%]
コード例
例 1
object-position: center;実行結果
object-position: center
中央の「中央」が見える
画像を中央に配置（デフォルト）
例 2
object-position: top left;実行結果
object-position: top left
左上の「左上」が見える
画像を左上に配置
例 3
object-position: bottom right;実行結果
object-position: bottom right
右下の「右下」が見える
画像を右下に配置
💡 TIPS
object-fit: cover;と組み合わせて、画像の表示位置を細かく制御できる。レスポンシブ画像で重要な部分を確実に表示したい場合に便利。
⚠️ よくある間違い
object-fitを指定しないと効果がない。background-positionと混同しやすいが、こちらは<img>タグなどの置換要素用。
🤖 AIがよく間違えるポイント
object-fit: coverでトリミングされる位置を調整するのがobject-positionです。AIは「人物の顔が見切れる」問題にimgの差し替えやJSを提案しがちですが、object-position: top（顔が上にある写真）などの1行で解決することが多いです。background-positionと同じ%基準の考え方が使えます。
💬 AIへの頼み方
プロフィール画像一覧で顔が見切れる問題を、object-fitとobject-positionの組み合わせで修正して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。
関連プロパティ
ブラウザサポート
Baseline 広く利用可能
Chrome
32+
Firefox
36+
Safari
10+
Edge
79+