CalculateY
How to calculate aspect ratio (16:9, 4:3, and beyond)
Aspect ratio is the proportion between width and height. A 16:9 image has 16 units of width for every 9 units of height. To find any missing dimension when the ratio is fixed, multiply the known side by the ratio of the other to it. A 16:9 hero at 1280px wide is 1280 × 9/16 = 720px tall. The same calculation works in either direction; you only need any two of the three values (ratio, width, height) to derive the third.
\[\text{Aspect Ratio} = \frac{\text{Width}}{\text{Height}}\]Common aspect ratios
| Ratio | Decimal | Where you see it |
|---|---|---|
| 1:1 | 1.000 | Instagram posts, profile photos, app icons |
| 5:4 | 1.250 | Old computer monitors, medium format photography |
| 4:3 | 1.333 | Pre-HDTV broadcast, iPad, classic film |
| 3:2 | 1.500 | DSLR camera sensors, 35mm film |
| 16:10 | 1.600 | Older laptops, some monitors |
| 16:9 | 1.778 | HD video, modern displays, YouTube |
| 1.85:1 | 1.850 | Standard widescreen film |
| 2:1 | 2.000 | Univisium, modern Netflix |
| 21:9 | 2.333 | Ultrawide monitors, cinematic film |
| 2.39:1 | 2.390 | Anamorphic film (Cinemascope) |
The decimal form (width / height) is useful because it makes ratios directly comparable. 16:9 is wider than 4:3 because 1.778 > 1.333. 21:9 is wider still at 2.333.
Solving for missing dimensions
Given any two of the three values, the third follows from algebra:
Width unknown: \(\text{Width} = \text{Height} \times \frac{W_{\text{ratio}}}{H_{\text{ratio}}}\)
Height unknown: \(\text{Height} = \text{Width} \times \frac{H_{\text{ratio}}}{W_{\text{ratio}}}\)
Ratio unknown: \(\text{Ratio} = \frac{\text{Width}}{\text{Height}}\)
Worked example: 16:9 video
Find the height of a 1920px wide 16:9 video:
\[\text{Height} = 1920 \times \frac{9}{16} = 1080 \text{ px}\]This is why “1920 × 1080” is the standard 1080p resolution.
Find the width of a 720px tall 16:9 video:
\[\text{Width} = 720 \times \frac{16}{9} = 1280 \text{ px}\]This is “1280 × 720” or 720p.
Worked example: instagram post
For a 1:1 square image at 1080px on the long side, both width and height are 1080px. Easy.
For Instagram stories at 9:16 (vertical) at 1080px wide:
\[\text{Height} = 1080 \times \frac{16}{9} = 1920 \text{ px}\]The result is 1080 × 1920, which is the recommended Instagram story size.
Reducing an aspect ratio to lowest terms
To find the simplest ratio for an arbitrary width × height, divide both by their greatest common divisor (GCD).
For 1920 × 1080:
- GCD(1920, 1080) = 120
- Simplified: 1920 / 120 : 1080 / 120 = 16 : 9
For 1024 × 768:
- GCD(1024, 768) = 256
- Simplified: 4 : 3
For 1366 × 768 (a common laptop resolution):
- GCD(1366, 768) = 2
- Simplified: 683 : 384
The 1366 × 768 example doesn’t reduce to clean numbers because the resolution doesn’t actually match standard 16:9 (which would be 1365.33 × 768). Some manufacturer chose 1366 to round up. The GCD reveals that.
CSS aspect-ratio property
The aspect-ratio CSS property reserves space for an element in a fixed ratio without specifying both dimensions:
.video {
aspect-ratio: 16 / 9;
width: 100%;
}
.thumbnail {
aspect-ratio: 1;
width: 200px;
/* height computed as 200px */
}
.banner {
aspect-ratio: 21 / 9;
width: 100%;
/* height computed dynamically */
}
This is the modern replacement for the “padding-bottom hack”:
/* Old way */
.video-wrapper {
position: relative;
padding-bottom: 56.25%; /* 9 / 16 = 0.5625 */
}
.video-wrapper iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* Modern way */
.video {
aspect-ratio: 16 / 9;
width: 100%;
}
The padding-bottom hack worked because percentage padding is computed against the parent’s width. 56.25% of width gives 9/16 of width, which equals the height needed for 16:9. The new property does the same thing more clearly.
Browser support is universal in modern browsers (Chrome 88+, Firefox 89+, Safari 15+, Edge 88+).
Resizing images while preserving aspect ratio
To resize an image without distortion, scale both dimensions by the same factor:
\[\text{New Height} = \text{Original Height} \times \frac{\text{New Width}}{\text{Original Width}}\]For a 4032 × 3024 phone photo (4:3) being resized to 1200px wide:
\[\text{New Height} = 3024 \times \frac{1200}{4032} = 900 \text{ px}\]Result: 1200 × 900, still 4:3.
If you instead need the image to fit a different aspect ratio (cropping required), the math is the same but you have to decide what to crop. For the same 4032 × 3024 source resized to 1200 × 630 (the OpenGraph default at 1.905:1):
- Scale to fit width: 1200 × 900
- Trim 270px of height (135 from top and bottom): 1200 × 630
Or scale to fit height: 840 × 630, then trim width.
The image resize calculator handles both proportional resize and target-ratio cropping math.
Aspect ratio in print and design
Print sizes have their own ratios:
| Format | Dimensions | Ratio |
|---|---|---|
| US Letter | 8.5 × 11 in | 0.773 (≈ 11:14) |
| A4 | 210 × 297 mm | 0.707 (1 / √2) |
| Business card | 3.5 × 2 in | 1.75 (7:4) |
| Postcard | 6 × 4 in | 1.5 (3:2) |
| 35mm photo | 36 × 24 mm | 1.5 (3:2) |
| Polaroid | 3.5 × 4.25 in | 0.824 |
The ISO 216 paper sizes (A0 through A10) are designed so that each size halves to the next: A4 cut in half makes two A5 sheets, both keeping the 1:√2 ratio. The math works out because √2 × √2 = 2 (cutting one dimension in half restores the original ratio when applied to the other dimension).
Quick conversion table
For 16:9 content at common widths:
| Width | Height (16:9) |
|---|---|
| 320 | 180 |
| 480 | 270 |
| 640 | 360 |
| 854 | 480 |
| 1280 | 720 |
| 1366 | 768 (not exact 16:9) |
| 1600 | 900 |
| 1920 | 1080 |
| 2560 | 1440 |
| 3840 | 2160 |
For 4:3 content:
| Width | Height (4:3) |
|---|---|
| 320 | 240 |
| 640 | 480 |
| 800 | 600 |
| 1024 | 768 |
| 1280 | 960 |
| 1600 | 1200 |
| 2048 | 1536 |
The aspect ratio calculator handles any input combination (width + height, width + ratio, height + ratio) and returns the missing value.