What Is an Aspect Ratio Calculator?
An aspect ratio calculator determines the proportional relationship between width and height from any dimensions. Enter a width and height, and this tool instantly calculates the simplified ratio, equivalent dimensions at different sizes, and the CSS aspect-ratio property value.
Common Aspect Ratios
16:9 — widescreen video, hero images, YouTube. 4:3 — traditional TV, presentations, blog images. 1:1 — Instagram posts, profile pictures, icons. 9:16 — Stories, TikTok, mobile video. 3:2 — DSLR photography, standard prints. 21:9 — ultrawide cinema, panoramic headers.
How to Use This Aspect Ratio Calculator
- Enter the original dimensions — Type the width and height of your image, video, or element in pixels.
- See the simplified ratio — The calculator reduces your dimensions to the simplest whole-number ratio (e.g., 1920×1080 → 16:9).
- Calculate missing dimensions — Enter a new width or height and the tool calculates the matching dimension that preserves the original ratio.
- Copy the result — Grab the ratio, the CSS aspect-ratio value, or the calculated dimensions for your project.
Tips and Best Practices
- → Use standard ratios for consistency. 16:9 (widescreen), 4:3 (traditional), 1:1 (square), and 3:2 (photography) are the most universally recognized ratios. Stick to these when possible.
- → Aspect ratio prevents layout shift. Setting width, height, and aspect-ratio on images reserves the correct space before they load, eliminating CLS — a Core Web Vital metric.
- → Calculate ratios for responsive images. When creating srcset images at multiple sizes, use the aspect ratio calculator to ensure all sizes maintain the exact same proportions.
- → Portrait vs. landscape. A 16:9 ratio in landscape is the same mathematical relationship as 9:16 in portrait. Use vertical ratios for mobile-first stories, reels, and vertical video.
See also: For trim sizes, the Print Bleed Calculator sits beside this one when prepping bleed margins for print artwork. For ecommerce product pages, the Size Chart Generator pairs with size charts when documenting garment or print dimensions.
Frequently Asked Questions
What is an aspect ratio?
The proportional relationship between width and height (e.g., 16:9). Describes the shape of images, videos, and screens. Common: 16:9 (widescreen), 4:3 (traditional), 1:1 (square).
How do I calculate it?
Divide width and height by their greatest common divisor. 1920÷120=16, 1080÷120=9, so 1920x1080 = 16:9. This tool calculates instantly from any dimensions.
Best ratio for web images?
16:9 for heroes/video, 4:3 for content images, 1:1 for social/thumbnails, 3:2 for photography. Match your layout and target platform.
What is an aspect ratio?+
An aspect ratio is the proportional relationship between width and height. It's expressed as two numbers separated by a colon — 16:9 means for every 16 units of width, there are 9 units of height. Aspect ratios are fundamental to responsive design, photography, video, and screen layouts.
What aspect ratio is 1920x1080?+
1920×1080 simplifies to a 16:9 aspect ratio. This is the standard widescreen ratio used by Full HD monitors, YouTube videos, and most modern displays.
How do I calculate aspect ratio from pixel dimensions?+
Divide both the width and height by their greatest common divisor (GCD). For 1920×1080, the GCD is 120, giving you 16:9. This calculator automates this process for any dimensions.
How do I calculate aspect ratio?+
Divide both width and height by their greatest common divisor (GCD). For example, 1920÷120 = 16, 1080÷120 = 9, so 1920x1080 is 16:9. This tool calculates it instantly from any dimensions.
What aspect ratio is best for web images?+
16:9 for hero images and videos (matches widescreen displays). 4:3 for traditional content images. 1:1 for social media and thumbnails. 3:2 for photography. Match the ratio to your layout design and target platform.
What aspect ratio should I use for a hero video on a website?+
16:9 is the safe default because every modern video editor, hosting platform, and browser handles it natively and it matches the format most footage is shot in. For a hero background that occupies the full viewport on desktop, consider 21:9 (cinematic) — it crops nicely on mobile when paired with object-fit: cover and feels more premium. Avoid hero videos in 4:3 or vertical aspect ratios on desktop; they leave large empty bands that fight the rest of the layout.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service