Aspect ratio calculator
Aspect Ratio Calculator
Pick a ratio and enter a width or height to get the other side. Enter a resolution to find its ratio.
Know the width? Get the height
Know the height? Get the width
Find the ratio of a resolution or image
Preview and CSS
One line of aspect-ratio is all you need. Use the padding-top hack only for very old browsers.
.box {
aspect-ratio: 16 / 9;
}Common aspect ratios
| Ratio | Width ÷ height | padding-top | Typical use | Example sizes |
|---|---|---|---|---|
| 9:16 | 0.563 | 177.78% | Shorts, Reels and Stories, phones in portrait | 1080×1920 |
| 4:5 | 0.8 | 125% | Instagram portrait posts | 1080×1350 |
| 1:1 | 1 | 100% | Square thumbnails, avatars, Instagram posts | 1080×1080 |
| 4:3 | 1.333 | 75% | iPad, phone camera photos, older monitors | 1024×768, 4032×3024 |
| 3:2 | 1.5 | 66.67% | DSLR and mirrorless photos, Surface laptops | 6000×4000, 2880×1920 |
| 16:10 | 1.6 | 62.5% | MacBooks and other laptops | 1440×900, 2560×1600 |
| 16:9 | 1.778 | 56.25% | YouTube video, Full HD and 4K monitors and TVs | 1920×1080, 3840×2160 |
| 1.91:1 | 1.905 | 52.5% | Link preview (Open Graph) images | 1200×630 |
| 21:9 | 2.333 | 42.86% | Ultrawide monitors, cinema footage | 2560×1080, 3440×1440 |
21:9 is a product category name. Real ultrawide monitors are 64:27 at 2560×1080 (about 2.37:1) and 43:18 at 3440×1440 (about 2.39:1).
Height chart by width
The height that matches each ratio for common widths, in px, rounded to one decimal place.
| Width | 16:9 | 4:3 | 3:2 | 16:10 | 21:9 |
|---|---|---|---|---|---|
| 320 | 180 | 240 | 213.3 | 200 | 137.1 |
| 360 | 202.5 | 270 | 240 | 225 | 154.3 |
| 375 | 210.9 | 281.3 | 250 | 234.4 | 160.7 |
| 390 | 219.4 | 292.5 | 260 | 243.8 | 167.1 |
| 480 | 270 | 360 | 320 | 300 | 205.7 |
| 640 | 360 | 480 | 426.7 | 400 | 274.3 |
| 720 | 405 | 540 | 480 | 450 | 308.6 |
| 768 | 432 | 576 | 512 | 480 | 329.1 |
| 800 | 450 | 600 | 533.3 | 500 | 342.9 |
| 1024 | 576 | 768 | 682.7 | 640 | 438.9 |
| 1280 | 720 | 960 | 853.3 | 800 | 548.6 |
| 1366 | 768.4 | 1024.5 | 910.7 | 853.8 | 585.4 |
| 1440 | 810 | 1080 | 960 | 900 | 617.1 |
| 1600 | 900 | 1200 | 1066.7 | 1000 | 685.7 |
| 1920 | 1080 | 1440 | 1280 | 1200 | 822.9 |
| 2560 | 1440 | 1920 | 1706.7 | 1600 | 1097.1 |
| 3840 | 2160 | 2880 | 2560 | 2400 | 1645.7 |
How to use CSS aspect-ratio
aspect-ratio locks the proportion between an element's width and height. Set the width and the height follows the ratio automatically.
.video {
width: 100%;
aspect-ratio: 16 / 9;
}
.thumb img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
}- One side must be auto. If you set both width and height, aspect-ratio is ignored.
- Content can stretch the box. If the text overflows, the box grows taller than the ratio. Add
min-height: 0oroverflow: hiddento enforce it. - Pair images and video with object-fit. Forcing a different ratio distorts them, so set
cover(crop to fill) orcontain(show everything). - Keep width and height attributes on img. The browser uses them to reserve space at the right ratio before the image loads, which reduces layout shift (CLS).
- Browser support: Chrome and Edge 88, Firefox 89 and Safari 15 (2021), so every current browser supports it.
Frequently asked questions
What is the height of a 16:9 image that is 1280px wide?
Height = width × 9 ÷ 16, so 1280 × 9 ÷ 16 = 720px. If you know the height instead, width = height × 16 ÷ 9. Type the width into the Width → Height box above to get it instantly.
How do I find the aspect ratio of a resolution?
Divide the width and height by their greatest common divisor. 1920×1080 divided by 120 is 16:9. Some resolutions such as 1366×768 reduce to an odd ratio (683:384), but at 1.779:1 they are close enough to 16:9 (1.778:1) that everyone calls them 16:9.
Where does padding-top: 56.25% come from?
It is height ÷ width × 100 for 16:9, so 9 ÷ 16 × 100 = 56.25%. Percentage padding is calculated from the parent's width, so a zero-height box with padding-top gets a height proportional to its width. 4:3 is 75% and 1:1 is 100%.
Should I use aspect-ratio or the padding-top hack?
Use aspect-ratio. Chrome, Edge, Firefox and Safari have all supported it since 2021, it is a single line, and you no longer need to absolutely position the content. The padding-top hack is only needed for very old browsers such as Internet Explorer.
What is the real ratio of a 21:9 monitor?
21:9 is more of a product category than an exact ratio. 2560×1080 is 64:27 (about 2.37:1) and 3440×1440 is 43:18 (about 2.39:1), while true 21:9 is 2.33:1. If you need to match a real screen, calculate the ratio from its resolution.