Ratio / Proportion Visualizer

Visualize ratios and proportions. Compare aspect ratios and design standards.

Ratios describe the relationship between two quantities. This tool visualizes proportions—display rectangles at different ratios to compare visually. Preset ratios include 16:9 (widescreen), 4:3 (classic), 1:1 (square), golden ratio (φ:1), ISO paper sizes (A-series), and more. Understand proportions through visual comparison rather than numbers alone.

Visualizer

Presets

Custom ratio (w:h)

Width

Height

Width ÷ height must be between 0.2 and 5.

16:9

Aspect ratio: 1.78:1

Common Ratios & Standards

A 3 by 2 grid visualizing a three-to-two ratio

Standard	Ratio	Decimal	Usage
Square	1:1	1.00	Instagram posts, portraits
4:3	4:3	1.33	Classic TV, old monitors
3:2	3:2	1.50	35mm film, print photography
16:9	16:9	1.78	HD video, modern monitors
21:9	21:9	2.33	Ultrawide monitors, cinema
Golden	φ:1	1.618	Art, design, architecture
ISO A-series	√2:1	1.414	A4, A3, paper sizes

Why √2 for paper?

ISO A-series paper uses √2:1 ratio so that folding a page in half creates two pages with the same ratio. This ensures consistency across sizes: A4 folded is A5, A3 folded is A4, etc.

Design Applications

Nested paper sheets showing consistent A-series proportions

Comparison of square, common, golden, and wide aspect ratios

Web Layout

Use ratios to define content areas. A sidebar of 250px and main content at 16:9 ratio creates balanced, responsive designs.

Photography Composition

Knowing common ratios helps frame shots. Shoot 4:3, 16:9, or square knowing it fits intended displays.

Print Design

ISO A-series paper and golden ratio rectangles guide poster and brochure layouts.

Video Production

16:9 is the broadcast standard. Knowing this prevents letterboxing and overscan issues.

FAQ

What's the difference between aspect ratio and ratio?

They're the same thing. Aspect ratio specifically refers to the width-to-height proportion of rectangles (images, screens, paper). Ratio is the general term for any width:height relationship.

How do I calculate a custom ratio?

Divide width by height. A 1920×1080 image is 1920 ÷ 1080 = 1.78 : 1 (or 16:9). Use this tool to visualize any ratio you calculate.

Why does my image look stretched?

The display might be forcing a different ratio. The actual image ratio didn't change—it's being displayed at an incompatible ratio. Use this tool to verify the correct ratio and then view in software that respects it.