Aspect Ratio Calculator

Calculate aspect ratios, missing dimensions, and simplify ratios for any image or screen size.

Aspect Ratio Calculator

Solve for:

Height
1080px
1920×1080
16:9

Common aspect ratios:

How to Use

1

Enter known width and height

Input existing dimensions to calculate and simplify the aspect ratio.

2

Find a missing dimension

Enter a ratio and one dimension to calculate the matching width or height.

3

Use preset ratios

Select from common presets: 16:9 for YouTube, 1:1 for Instagram, 9:16 for portrait video.

4

Compare ratios visually

Use the visualization to see how different aspect ratios compare in proportion.

What is Aspect Ratio?

Aspect ratio describes the proportional relationship between width and height. It is expressed as W:H (e.g. 16:9 for widescreen or 4:3 for standard). Maintaining aspect ratio prevents images and videos from appearing stretched or distorted.

Real-World Examples & Use Cases

Video Production and YouTube Thumbnails

Video creators producing YouTube content, course videos, and webinars need to work within specific aspect ratios. YouTube recommends 1280×720 minimum for thumbnails (16:9) and 1920×1080 for full HD video. Vertical video for Shorts/TikTok uses 1080×1920 (9:16). Calculating how to scale a 1366×768 source to 1920×1080 width while maintaining 16:9, or finding what width a 2160px-high 16:9 video should be (3840px), are both immediate aspect ratio calculations.

Responsive Web Image Sizing

Web developers implementing responsive images with CSS aspect-ratio property, picture srcset, and image CDN resize parameters need to calculate dimensions that maintain correct proportions at each breakpoint. A hero image sized at 1200×628 (1.91:1 ratio for social sharing) needs to be scaled to 800×418 for tablet and 400×209 for mobile without distortion. An aspect ratio calculator confirms the height at each width, or the equivalent ratio as a percentage padding-top trick (height/width × 100 = 52.3% for 1.91:1).

Social Media Content Dimensions

Social media platforms have specific aspect ratio requirements for each content type. Instagram feed posts: 1:1 (1080×1080), 4:5 portrait (1080×1350), 1.91:1 landscape. Facebook link previews: 1.91:1 (1200×628). LinkedIn cover images: 1584×396 (4:1). Twitter/X cards: 2:1 (1200×600). TikTok/Reels: 9:16 (1080×1920). An aspect ratio calculator helps content creators prepare a source image for the exact dimension requirements of each platform without distortion or unintended cropping.

UI/UX Design and Wireframing

Interface designers choosing screen resolutions, dialog sizes, and component proportions use aspect ratio relationships to maintain visual consistency. A card component that's 320×180px is exactly 16:9 — maintaining this ratio at other sizes (240×135, 480×270) ensures consistent appearance across breakpoints. Designing for specific device screens requires knowing that an iPhone 14 (390×844 points) has approximately a 9:19.5 ratio, while a standard laptop (1440×900) is exactly 8:5.

How It Works

Aspect Ratio Formulas: Ratio from dimensions: ratio = width : height simplified using GCD (Greatest Common Divisor): GCD(1920, 1080) = 120 1920/120 : 1080/120 = 16 : 9 JavaScript GCD (Euclidean algorithm): function gcd(a, b) { return b === 0 ? a : gcd(b, a % b); } function simplifyRatio(w, h) { const d = gcd(w, h); return w/d + ':' + h/d; } Width from height (maintaining ratio): width = height × (ratioW / ratioH) Example: Height=1080, Ratio=16:9 width = 1080 × (16/9) = 1920 Height from width: height = width × (ratioH / ratioW) Example: Width=1280, Ratio=16:9 height = 1280 × (9/16) = 720 Decimal ratio (divide-form): 1920:1080 = 1.778 (= 16/9) 2560:1080 = 2.370 (= 21:9 ultra-wide) 1080:1920 = 0.5625 (= 9:16 portrait) Padding-top CSS trick (maintaining ratio): padding-top % = (height/width) × 100 For 16:9: (9/16) × 100 = 56.25% Modern alternative: aspect-ratio: 16/9; (CSS property) Pixel density and aspect ratio: For crisp display at 2x DPI: multiply both dimensions by 2 16:9 at 2x: 1920×1080 → 3840×2160 (same ratio, double resolution)

Frequently Asked Questions

What is the most common aspect ratio for websites?▼
There's no single 'website' aspect ratio — screens vary from 9:16 (portrait phone) to 21:9 (ultra-wide monitor). However, 16:9 (1.78:1) is the most common desktop monitor ratio. For website components: hero images typically use 16:9 or 2:1 for landscape headers. Cards and thumbnails use 16:9 or 4:3. Profile images use 1:1 (square). The key is not choosing one ratio for the whole site, but specifying explicit aspect ratios for each component type so layouts don't shift as images load.
What does the CSS aspect-ratio property do?▼
The CSS aspect-ratio property (aspect-ratio: 16/9) makes an element maintain a specific width-to-height proportion automatically. As the width changes (responsive layout), the browser adjusts the height to maintain the ratio. Before this property, developers used the padding-top percentage hack (padding-top: 56.25% creates a 16:9 box because 9/16=0.5625). The modern aspect-ratio property is simpler, works for both width-based and height-based responsive scenarios, and is supported in all modern browsers since 2021.
Why do my images look stretched on some devices?▼
Images appear stretched when width and height are set independently without preserving the original aspect ratio. Common causes: CSS specifying both width: 100% and height: 200px on an image element (the actual ratio of the image is ignored); background-size: 100% 100% on a background-image (should be background-size: cover or contain instead); an HTML <img> element where both width and height HTML attributes differ from the image's natural proportions. Fix: use object-fit: cover/contain on img elements, and always derive one dimension mathematically from the other.
What is the difference between 4:3 and 16:9?▼
4:3 (1.33:1) is the 'standard' ratio used in analog TV, early computer monitors, and most photography. It's squarer, allocating more vertical space relative to width. 16:9 (1.78:1) is the 'widescreen' HD ratio, adopted for HDTV and modern monitors. It's wider, better using the way humans see (eyes are side by side, not vertically stacked). 16:9 is 33% wider than 4:3 at the same height. When 4:3 content (old TV shows, photos) displays on a 16:9 screen, it gets pillarboxed (black bars on sides). When 16:9 content shows on 4:3, it gets letterboxed (black bars top/bottom).
How do I crop an image to an exact aspect ratio?▼
To crop a 4000×3000 image to 16:9, calculate the target dimensions: if keeping full width (4000px), height = 4000 × 9/16 = 2250px. Crop 375 pixels from top and bottom ((3000-2250)/2 = 375). If keeping full height (3000px), width = 3000 × 16/9 = 5333px — exceeds original width, so keep width. Use the aspect ratio calculator to determine the target crop dimensions before opening your image editor. CSS object-position and Cloudinary's crop transformations can automate this in production.

Related Tools

Explore other tools in this category.

JSON Formatter

Format, validate, prettify, and minify your JSON data quickly.

Password Strength Checker

Analyze how secure your password is and generate a strong one instantly.

CSS Unit Converter

Convert between CSS units: px, rem, em, pt, vw, vh, cm, mm, and inches.

Binary ? Text Converter

Convert plain text to binary code and decode binary back to readable text.

Text to Binary Converter

Convert letters and strings into computer binary format.

QR Code Generator

Create and download customized QR codes for URLs, text, and contacts.

Looking for something else?

More in this CategoryExplore All Tools