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

#webdev #css #design #tools

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

Ratio	Use case
16:9	HD video, widescreen monitors, YouTube thumbnails
4:3	Old TV, presentation slides
1:1	Instagram posts, avatars
3:2	DSLR photos, 35mm film
21:9	Ultrawide monitors, cinema
9:16	Mobile video, Instagram Stories, TikTok
1.91:1	Open Graph images (~1200×628)

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!

DEV Community