Aspect Ratio Calculator

Understanding Aspect Ratios in Photography, Video, & Web Design

An aspect ratio is the proportional relationship between a display frame or graphic's width and height. Expressed as two numbers separated by a colon (such as 16:9), aspect ratios dictate image composition without constraining graphics to fixed pixel dimensions. Our Aspect Ratio Calculator helps graphic designers, video editors, and web developers scale dimensions proportionally without distortion or cropping.

Standard Aspect Ratio Quick Reference

Common resolution standards across digital media platforms:

16:9 (Widescreen): Standard for HD video displays, YouTube, television, and desktop monitors (e.g., 1920×1080, 1280×720, 3840×2160).
9:16 (Vertical Video): Standard vertical format for Instagram Reels, TikTok, YouTube Shorts, and smartphone content (e.g., 1080×1920).
1:1 (Square): Standard format for social media profile avatars and Instagram feed posts (e.g., 1080×1080).
4:3 (Legacy / Standard Display): Traditional broadcast TV format and iPad tablet screens (e.g., 1024×768).

How to Calculate Scaled Dimensions Math

To resize an image while preserving its aspect ratio, use cross-multiplication:

Calculating New Height (H2)

H2 = (W2 × H1) ÷ W1

Example: To resize a 1920×1080 image to 800px width: (800 × 1080) ÷ 1920 = 450px height.

Calculating New Width (W2)

W2 = (H2 × W1) ÷ H1

Example: To resize a 1920×1080 video to 600px height: (600 × 1920) ÷ 1080 = 1067px width.

Modern CSS aspect-ratio Property

Before modern CSS, preventing Cumulative Layout Shift (CLS) for responsive videos required complex padding-bottom tricks. Today, modern browsers support the native aspect-ratio CSS property:

/* Prevent Cumulative Layout Shift (CLS) on Responsive Media */
.video-container {
width: 100%;
aspect-ratio: 16 / 9;
}

Eliminates Layout Shifts Declaring aspect-ratio reserves correct vertical layout space before high-res images or iframe embeds finish loading over slow connections.
Pairs Perfectly with object-fit: cover Combine aspect-ratio with object-fit: cover to automatically crop responsive card thumbnail images seamlessly across mobile breakpoints.

Original Ratio / Dimensions

Scaled New Dimensions