# Aspect Ratio

Set the aspect ratio of an element.

**Widely available.** This feature is well established and works across many devices and browser versions.

Chrome 88 · Edge 88 · Firefox 89 · Safari 15

| Class | Properties | Value |
|-------|------------|-------|
| `ar:auto` | aspect-ratio | `auto` |
| `ar:1/1` | aspect-ratio | `1` |
| `ar:1/2` | aspect-ratio | `1 / 2` |
| `ar:2/1` | aspect-ratio | `2` |
| `ar:2/3` | aspect-ratio | `2 / 3` |
| `ar:3/2` | aspect-ratio | `3 / 2` |
| `ar:3/4` | aspect-ratio | `3 / 4` |
| `ar:4/3` | aspect-ratio | `4 / 3` |
| `ar:4/5` | aspect-ratio | `4 / 5` |
| `ar:5/4` | aspect-ratio | `5 / 4` |
| `ar:5/7` | aspect-ratio | `5 / 7` |
| `ar:7/5` | aspect-ratio | `7 / 5` |
| `ar:9/16` | aspect-ratio | `9 / 16` |
| `ar:16/9` | aspect-ratio | `16 / 9` |
| `ar:21/9` | aspect-ratio | `21 / 9` |
| `ar:9/21` | aspect-ratio | `9 / 21` |

### Media Queries

Prefix a class with a breakpoint to apply it from that width up.

| Class | Properties | Value |
|-------|------------|-------|
| `ar:auto` | aspect-ratio | `auto` |
| `ar:1/1` | aspect-ratio | `1` |
| `ar:1/2` | aspect-ratio | `1 / 2` |
| `ar:2/1` | aspect-ratio | `2` |
| `ar:2/3` | aspect-ratio | `2 / 3` |
| `ar:3/2` | aspect-ratio | `3 / 2` |
| `ar:3/4` | aspect-ratio | `3 / 4` |
| `ar:4/3` | aspect-ratio | `4 / 3` |
| `ar:4/5` | aspect-ratio | `4 / 5` |
| `ar:5/4` | aspect-ratio | `5 / 4` |
| `ar:5/7` | aspect-ratio | `5 / 7` |
| `ar:7/5` | aspect-ratio | `7 / 5` |
| `ar:9/16` | aspect-ratio | `9 / 16` |
| `ar:16/9` | aspect-ratio | `16 / 9` |
| `ar:21/9` | aspect-ratio | `21 / 9` |
| `ar:9/21` | aspect-ratio | `9 / 21` |

### Pseudo Classes

Prefix a class with a state to apply it only while that state matches.

| Class | Properties | Value |
|-------|------------|-------|
| `ar:auto` | aspect-ratio | `auto` |
| `ar:1/1` | aspect-ratio | `1` |
| `ar:1/2` | aspect-ratio | `1 / 2` |
| `ar:2/1` | aspect-ratio | `2` |
| `ar:2/3` | aspect-ratio | `2 / 3` |
| `ar:3/2` | aspect-ratio | `3 / 2` |
| `ar:3/4` | aspect-ratio | `3 / 4` |
| `ar:4/3` | aspect-ratio | `4 / 3` |
| `ar:4/5` | aspect-ratio | `4 / 5` |
| `ar:5/4` | aspect-ratio | `5 / 4` |
| `ar:5/7` | aspect-ratio | `5 / 7` |
| `ar:7/5` | aspect-ratio | `7 / 5` |
| `ar:9/16` | aspect-ratio | `9 / 16` |
| `ar:16/9` | aspect-ratio | `16 / 9` |
| `ar:21/9` | aspect-ratio | `21 / 9` |
| `ar:9/21` | aspect-ratio | `9 / 21` |