Calculate aspect ratios, resize dimensions proportionally, and find common ratios for video, images, and screens.
Enter a new width or height — the other dimension auto-calculates to maintain the ratio.
An aspect ratio is the proportional relationship between width and height. It's expressed as two numbers separated by a colon (e.g., 16:9). Understanding aspect ratios is essential for video editing, photography, web design, and responsive layouts.
To find the aspect ratio, divide both the width and height by their Greatest Common Divisor (GCD). For example, 1920×1080: GCD(1920,1080) = 120, so 1920/120 = 16, 1080/120 = 9 → 16:9.
Modern CSS supports native aspect ratios:
aspect-ratio: 16 / 9;
This property is supported in Chrome 88+, Firefox 89+, Safari 15+, and Edge 88+. It's perfect for responsive images, videos, and card layouts.
| Ratio | Decimal | Common Use | Example Resolution |
|---|---|---|---|
| 1:1 | 1.0000 | Instagram, profile pictures | 1080×1080 |
| 4:3 | 1.3333 | Classic TV, iPad | 1024×768 |
| 3:2 | 1.5000 | DSLR photos, MacBook | 1440×960 |
| 16:9 | 1.7778 | YouTube, HDTV, monitors | 1920×1080 |
| 16:10 | 1.6000 | MacBook Pro, some monitors | 2560×1600 |
| 21:9 | 2.3333 | Ultrawide monitors, cinema | 3440×1440 |
| 9:16 | 0.5625 | TikTok, Instagram Reels, Stories | 1080×1920 |
| 4:5 | 0.8000 | Instagram portrait | 1080×1350 |
| 2:1 | 2.0000 | Univisium, Twitter header | 1500×750 |
| 32:9 | 3.5556 | Samsung super ultrawide | 5120×1440 |
| Platform | Recommended | Resolution |
|---|---|---|
| YouTube | 16:9 | 1920×1080 or 3840×2160 |
| TikTok | 9:16 | 1080×1920 |
| Instagram Feed | 1:1 or 4:5 | 1080×1080 or 1080×1350 |
| Instagram Reels | 9:16 | 1080×1920 |
| Twitter/X | 16:9 | 1200×675 |
| 1.91:1 | 1200×627 | |
| 16:9 or 1:1 | 1200×675 or 1080×1080 |
Generate SVG/PNG placeholder images at any size and aspect ratio.
Placeholder Generator →Aspect ratio is the proportional relationship between an element's width and height, expressed as width:height. Common ratios include 16:9 (widescreen video), 4:3 (traditional screens), 1:1 (square), and 9:16 (mobile vertical). Maintaining correct aspect ratio prevents image distortion and ensures content displays correctly across different screen sizes and resolutions.
Use the CSS aspect-ratio property: aspect-ratio: 16 / 9. For older browsers, use the padding-top trick: set padding-top as a percentage (56.25% for 16:9) on a container with position:relative, then absolutely position the content inside. The aspect-ratio CSS property has excellent browser support and is the modern preferred approach.
Twitter/X cards use 2:1. Instagram feed posts use 1:1 or 4:5. Instagram Stories and Reels use 9:16. Facebook link previews use 1.91:1. LinkedIn articles use 1.91:1. YouTube thumbnails use 16:9 (1280x720px). Use the correct ratio to prevent cropping in each platform's feed display.
Multiply one dimension by the ratio to get the other. For a 1920x1080 image at 800px wide: scale = 800/1920 = 0.4167, so height = 1080 × 0.4167 = 450px. In CSS, setting only width or only height on an img tag (with the other set to auto) automatically preserves the aspect ratio.
16:9 is the standard widescreen ratio used by HDTVs, YouTube, most monitors, and laptop screens. 16:10 (or 8:5) is slightly taller, used in professional and education laptops. The extra height improves productivity for document work. Modern MacBooks use a 16:10 display, giving slightly more vertical space than standard widescreen.