Smallest whole-pixel size 9 × 16.
In CSS: aspect-ratio: 9 / 16. Rotated it becomes 16:9.
Where 9:16 is used
Instagram Stories and Reels, TikTok, YouTube Shorts, Snapchat.
16:9 turned on its side. It became the dominant video ratio the moment vertical-first apps outgrew television.
Rendered live with aspect-ratio: 9 / 16.
9:16 resolutions
Every size below is exactly 9:16 — no rounding. Sizes marked as a standard are named display resolutions.
| Resolution | Width | Height | Megapixels | Standard |
|---|---|---|---|---|
| 162 × 288 | 162 | 288 | 0.05 | — |
| 171 × 304 | 171 | 304 | 0.05 | — |
| 180 × 320 | 180 | 320 | 0.06 | — |
| 189 × 336 | 189 | 336 | 0.06 | — |
| 198 × 352 | 198 | 352 | 0.07 | — |
| 207 × 368 | 207 | 368 | 0.08 | — |
| 216 × 384 | 216 | 384 | 0.08 | — |
| 225 × 400 | 225 | 400 | 0.09 | — |
| 234 × 416 | 234 | 416 | 0.1 | — |
| 243 × 432 | 243 | 432 | 0.1 | — |
| 252 × 448 | 252 | 448 | 0.11 | — |
| 261 × 464 | 261 | 464 | 0.12 | — |
| 270 × 480 | 270 | 480 | 0.13 | — |
| 279 × 496 | 279 | 496 | 0.14 | — |
| 288 × 512 | 288 | 512 | 0.15 | — |
| 297 × 528 | 297 | 528 | 0.16 | — |
| 306 × 544 | 306 | 544 | 0.17 | — |
| 315 × 560 | 315 | 560 | 0.18 | — |
| 324 × 576 | 324 | 576 | 0.19 | — |
| 333 × 592 | 333 | 592 | 0.2 | — |
| 342 × 608 | 342 | 608 | 0.21 | — |
| 351 × 624 | 351 | 624 | 0.22 | — |
| 360 × 640 | 360 | 640 | 0.23 | — |
| 369 × 656 | 369 | 656 | 0.24 | — |
| 378 × 672 | 378 | 672 | 0.25 | — |
| 387 × 688 | 387 | 688 | 0.27 | — |
| 396 × 704 | 396 | 704 | 0.28 | — |
| 405 × 720 | 405 | 720 | 0.29 | — |
| 414 × 736 | 414 | 736 | 0.3 | — |
| 423 × 752 | 423 | 752 | 0.32 | — |
| 432 × 768 | 432 | 768 | 0.33 | — |
| 441 × 784 | 441 | 784 | 0.35 | — |
| 450 × 800 | 450 | 800 | 0.36 | — |
| 459 × 816 | 459 | 816 | 0.37 | — |
| 468 × 832 | 468 | 832 | 0.39 | — |
| 477 × 848 | 477 | 848 | 0.4 | — |
| 486 × 864 | 486 | 864 | 0.42 | — |
| 495 × 880 | 495 | 880 | 0.44 | — |
| 504 × 896 | 504 | 896 | 0.45 | — |
| 513 × 912 | 513 | 912 | 0.47 | — |
Using 9:16 in CSS
/* Modern — one line */
.box { aspect-ratio: 9 / 16; }
/* With a fixed width */
.box { width: 100%; max-width: 360px; aspect-ratio: 9 / 16; }
/* Legacy padding-top hack, if you still need it */
.box-legacy { position: relative; }
.box-legacy::before { content: ""; display: block; padding-top: 177.7778%; }
.box-legacy > * { position: absolute; inset: 0; }Devices with a 9:16 screen
| Device | Native resolution | CSS viewport | Diagonal |
|---|---|---|---|
| iPhone SE (3rd gen) | 750 × 1334 | 375 × 667 | 4.7″ |
| iPhone SE (2nd gen) | 750 × 1334 | 375 × 667 | 4.7″ |
| iPhone SE (1st gen) | 640 × 1136 | 320 × 568 | 4″ |
| iPhone 8 Plus | 1080 × 1920 | 414 × 736 | 5.5″ |
| iPhone 8 | 750 × 1334 | 375 × 667 | 4.7″ |
| iPhone 7 Plus | 1080 × 1920 | 414 × 736 | 5.5″ |
| iPhone 7 | 750 × 1334 | 375 × 667 | 4.7″ |
| iPhone 6s Plus | 1080 × 1920 | 414 × 736 | 5.5″ |
| iPhone 6s | 750 × 1334 | 375 × 667 | 4.7″ |
| iPhone 6 Plus | 1080 × 1920 | 414 × 736 | 5.5″ |
Questions about 9:16
What resolution is 9:16?
9:16 is a ratio, not a fixed resolution — any size where width ÷ height equals 0.5625 qualifies. The smallest whole-pixel pair is 9 × 16, and common ones include .
What is 9:16 used for?
Instagram Stories and Reels, TikTok, YouTube Shorts, Snapchat.
How do I set 9:16 in CSS?
Use the aspect-ratio property: aspect-ratio: 9 / 16;. The element then keeps that shape at any width. It is supported in every current browser.
What is 9:16 the other way round?
Rotated to landscape it becomes 16:9 — the same shape, turned 90 degrees.
How do I calculate a 9:16 height from a width?
Multiply the width by 1.777778. For example width × ratio = height. The calculator does it both directions.