# object-fit

> 画像や動画などの置換要素がコンテナにどのようにフィットするかを制御するプロパティです。contain、cover、fill、none、scale-downの値があり、アスペクト比を維持した表示が可能です。

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

## 構文

```css
object-fit: fill | contain | cover | none | scale-down
```

## Tailwindでは

- `object-cover` → object-fit: cover
- `object-contain` → object-fit: contain
- `object-fill` → object-fit: fill
- `object-scale-down` → object-fit: scale-down

## ブラウザ対応

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

## コード例

### 例1: アスペクト比を保ちながらコンテナを埋める

```css
object-fit: cover;
```

### 例2: アスペクト比を保ちながらコンテナに収める

```css
object-fit: contain;
```

### 例3: アスペクト比を無視してコンテナに合わせる（歪む可能性あり）

```css
object-fit: fill;
```

### 例4: 元のサイズのまま表示（はみ出し部分はカット）

```css
object-fit: none;
```

### 例5: containとnoneのうち、結果的に小さくなる方を適用

```css
object-fit: scale-down;
```

## TIPS

レスポンシブ画像の必須プロパティ。aspect-ratioと組み合わせると強力。

## AIがよく間違えるポイント

coverとcontainの取り違えがAIにも頻発します（cover=領域を埋めて見切れる、contain=全体が見えて余白が出る）。またobject-fitはimg/video自身に指定するもので、親要素に書いても効きません。img側にwidth/height（またはaspect-ratio）でボックスサイズを与えないと効果が見えない点も生成コードの定番ミスです。

## AIへの依頼文例

- サムネイル一覧で画像の縦横比がバラバラでも揃って見えるように、object-fit: coverとaspect-ratioで実装して

## 関連プロパティ

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