Aspect Ratio Calculator
Solve for the missing width or height, simplify any ratio, and get the CSS that reserves the right box so your images never cause layout shift.
Photo by Alexander Dummer on Unsplash
Aspect ratio calculator
Leave one of the two “new” fields empty and it will be calculated for you. Fill both and the ratio comparison is shown.
CSS for this ratio
Key takeaways
- Aspect ratio is a proportion, so 1280×720 and 3840×2160 are both 16:9 and scale into each other cleanly.
- Setting width and height attributes on an image lets the browser reserve space before CSS loads, which is the main fix for Cumulative Layout Shift.
- Use 1.91:1 (1200×630) for social sharing images across all major platforms.
What an aspect ratio is
An aspect ratio is the proportional relationship between width and height, written as width:height. A 1920×1080 image is 16:9 because dividing both numbers by their greatest common divisor (120) gives 16 and 9.
The ratio is what matters, not the absolute size. 1920×1080, 1280×720 and 3840×2160 are all 16:9 and all scale into each other without distortion. Mix ratios and something has to give: the image is either stretched, letterboxed with bars, or cropped.
Ratios you will actually meet
| Ratio | Decimal | Where it is used |
|---|---|---|
| 16:9 | 1.778 | HD and 4K video, YouTube, most monitors and TVs |
| 9:16 | 0.563 | Stories, Reels, TikTok, Shorts |
| 4:3 | 1.333 | Pre-2005 displays, iPad, many projectors |
| 3:2 | 1.5 | 35mm film and most DSLR sensors |
| 1:1 | 1.0 | Instagram feed posts, avatars, product grids |
| 1.91:1 | 1.91 | Open Graph and Twitter Card images (1200×630) |
| 21:9 | 2.333 | Ultrawide monitors |
| 2.39:1 | 2.39 | Anamorphic widescreen cinema |
| 1.618:1 | 1.618 | The golden ratio, used in classical composition |
For social sharing images the important number is 1.91:1 — 1200×630 pixels is the size Facebook, LinkedIn and X all handle well. Build and preview those with the social card debugger.
Aspect ratio and Cumulative Layout Shift
Reserving space for an image before it loads is one of the highest-leverage performance fixes available, because unreserved images are the leading cause of Cumulative Layout Shift — a Core Web Vital.
The modern approach is one CSS line:
img { aspect-ratio: 16 / 9; width: 100%; height: auto; }The even better approach is to put width and height attributes on the image element. Since 2019 browsers compute the ratio from those attributes and reserve the box before any CSS arrives:
<img src="hero.jpg" width="1600" height="900" alt="...">Do both. The attributes handle the pre-CSS window; the CSS handles responsive resizing. A good CLS score is under 0.1, and reserved image boxes usually get you most of the way there.
Fitting content into a different ratio
When source and target ratios differ, object-fit decides what happens:
| Value | Behaviour | Use for |
|---|---|---|
cover | Fills the box, cropping the overflow | Hero images, thumbnails, backgrounds |
contain | Fits entirely, leaving empty space | Logos, diagrams, product shots on white |
fill | Stretches to fit, distorting | Almost never |
none | Original size, cropped by the box | Pixel art |
scale-down | The smaller of none and contain | User-uploaded images of unknown size |
Pair cover with object-position to control which part survives the crop — object-position: 50% 25% keeps faces in frame on portrait crops.
Frequently Asked Questions
How do I calculate an aspect ratio?
Divide width and height by their greatest common divisor. For 1920×1080 the GCD is 120, giving 16:9. The calculator does this and recognises near-matches to standard ratios.
What resolution is 16:9?
Any resolution where width divided by height equals 1.778 — 1280×720, 1920×1080, 2560×1440 and 3840×2160 are the common ones.
How do I resize an image without distorting it?
Change one dimension and let the other follow the original ratio. Enter your original size and the new width here, and the correct height is calculated.
What aspect ratio should social sharing images use?
1.91:1, typically 1200×630 pixels. That works across Facebook, LinkedIn and X without awkward cropping.
Does aspect ratio affect SEO?
Indirectly and significantly. Unreserved image boxes cause layout shift, and Cumulative Layout Shift is a Core Web Vital used in ranking. Setting width and height attributes fixes it.
What is the golden ratio?
Approximately 1.618:1, the proportion where the whole relates to the larger part as the larger part relates to the smaller. It appears throughout classical art and architecture and is included as a preset.
Sources & further reading
- MDN: aspect-ratio — the CSS property and its interaction with intrinsic sizing
- web.dev: Cumulative Layout Shift — why reserving image space matters for Core Web Vitals
- MDN: object-fit — how content is fitted when ratios differ
- The Open Graph protocol — image dimension recommendations for social sharing