# object-position

> object-fitと組み合わせて使用し、画像や動画などの置換要素の位置を調整するプロパティです。top、center、bottom、left、right等のキーワードや%、pxで指定でき、アスペクト比を維持しながら表示位置を制御します。

- カテゴリ: 背景・装飾
- URL: https://www.css-dictionary.com/property/object-position/

## 構文

```css
object-position: <position>
```

## Tailwindでは

- `object-center` → object-position: center
- `object-top` → object-position: top
- 任意値: `object-[25%_75%]`

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 32+ / Firefox 36+ / Safari 10+ / Edge 79+

## コード例

### 例1: 画像を中央に配置（デフォルト）

```css
object-position: center;
```

### 例2: 画像を左上に配置

```css
object-position: top left;
```

### 例3: 画像を右下に配置

```css
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の組み合わせで修正して

## 関連プロパティ

- [object-fit](https://www.css-dictionary.com/property/object-fit.md)
- [aspect-ratio](https://www.css-dictionary.com/property/aspect-ratio.md)