I built a browser-only Aspect Ratio Calculator — resize with ratio lock, common presets, 102 tests

Resizing images or UI elements while maintaining the aspect ratio is a daily task. I built a free, browser-only Aspect Ratio Calculator that handles it instantly — with common presets and ratio lock.

Live Tool

👉 https://devnestio.pages.dev/aspect-ratio-calculator/

What it does

• Width ↔ Height locking — enter either dimension and the other updates automatically
• Custom ratio input — type any W:H ratio (e.g. 16:9, 4:3, 1.91:1)
• Common presets — 16:9, 4:3, 1:1, 3:2, 21:9, 9:16 (portrait), 1.91:1 (Open Graph)
• Simplified ratio — reduces 1920:1080 to 16:9 automatically
• Multiple units — pixels, percentages, or custom scale factors
• CSS snippet — generates aspect-ratio: 16 / 9; for direct use in CSS
• 100% client-side — instant, no server

Common aspect ratios and their uses

How ratio simplification works

Given dimensions W × H, the tool computes gcd(W, H) using the Euclidean algorithm and divides both values:

function gcd(a, b) { return b === 0 ? a : gcd(b, a % b); }
const g = gcd(1920, 1080); // 120
console.log(1920/g, 1080/g); // 16, 9

Floating-point ratios (like 1.91:1) are multiplied by 100 before GCD to avoid rounding.

Tech stack

• Pure Vanilla JS (zero dependencies)
• Single HTML file
• CSS Grid layout
• Hosted on Cloudflare Pages

Testing

102 tests, all passing ✅

Tests cover:

• Width → height calculation for all presets
• Height → width calculation for all presets
• GCD-based ratio simplification (1920×1080 → 16:9, etc.)
• Custom ratio parsing (decimal and integer)
• Preset button population
• CSS snippet generation
• Edge cases: 1×1, very large values, non-integer ratios
• Input validation and error states
• SEO and accessibility meta tags

All tools at devnestio.pages.dev — free browser-only developer utilities.

Feedback welcome in the comments!