# aspect-ratio

> 要素のアスペクト比（縦横比）を指定するプロパティです。16/9や1/1のように指定し、レスポンシブな画像や動画の表示で縦横比を維持します。padding-topハックの代替として、より直感的な実装が可能です。

- カテゴリ: レイアウト・配置
- URL: https://www.css-dictionary.com/property/aspect-ratio/

## 構文

```css
aspect-ratio: <ratio> | auto
```

## Tailwindでは

- `aspect-square` → aspect-ratio: 1 / 1
- `aspect-video` → aspect-ratio: 16 / 9
- `aspect-auto` → aspect-ratio: auto
- 任意値: `aspect-[4/3]`

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 88+ / Firefox 89+ / Safari 15+ / Edge 88+

## コード例

### 例1: 16:9の横長比率

```css
aspect-ratio: 16 / 9;
```

### 例2: 正方形

```css
aspect-ratio: 1 / 1;
```

### 例3: 4:3の比率

```css
aspect-ratio: 4 / 3;
```

### 例4: 3:4の縦長比率

```css
aspect-ratio: 3 / 4;
```

### 例5: 21:9のワイド比率

```css
aspect-ratio: 21 / 9;
```

### 例6: 9:16のモバイル縦長比率

```css
aspect-ratio: 9 / 16;
```

## TIPS

画像やiframeの埋め込みで、レイアウトシフトを防ぐのに効果的。

## よくある間違い

widthまたはheightのどちらかは指定する必要がある。

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

AIは古い知識でpadding-top比率ハック（padding-top: 56.25%）を提案しがちですが、現在はaspect-ratio: 16 / 9の1行で済みます。またimg要素はwidth/height属性からアスペクト比が自動計算されるため、CLS（レイアウトシフト）対策には属性指定＋aspect-ratioの理解が重要です。両方の寸法を明示すると aspect-ratio は無視される仕様も見落とされがちです。

## AIへの依頼文例

- このpadding-topハックによる16:9埋め込みをaspect-ratioに置き換えて
- 画像読み込み時のレイアウトシフトを、width/height属性とaspect-ratioで防いで

## 関連プロパティ

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