📐

Aspect Ratio Calculator

Calculate aspect ratio from dimensions, or find missing dimension from ratio.

Dimensions → Aspect Ratio

× = 16:9

Aspect Ratio → Missing Dimension

Width: → Height: 1080 px

Height: → Width: — px

Common Screen Sizes (16:9)

Name	Width	Height	Ratio
4K UHD	3840	2160	16:9
Full HD (1080p)	1920	1080	16:9
HD (720p)	1280	720	16:9
Instagram Post	1080	1080	1:1
Instagram Story	1080	1920	9:16
Twitter Card	1200	628	~1.91:1

About Aspect Ratio Calculator

Aspect Ratio Calculator helps you quickly determine the proportional relationship between width and height for any resolution. Enter any two dimensions to find the simplified ratio, or lock an aspect ratio and calculate the missing width or height when resizing. The tool includes common presets like 16:9 (widescreen), 4:3 (standard), 21:9 (ultrawide), 9:16 (mobile portrait), and more — plus a reference table of popular screen sizes. Perfect for designers, video editors, and developers who need proportionally correct dimensions.

How to Use

Enter width and height Type your dimensions into the width and height fields, or pick a common ratio preset like 16:9, 4:3, or 21:9.

See the calculated ratio The simplified aspect ratio is displayed instantly along with a visual preview of the proportions.

Lock ratio and resize proportionally Enter a known width or height with a locked ratio to calculate the missing dimension. Use the common sizes table as a quick reference.

🔒 Privacy note: All processing happens locally in your browser. Your data is never sent to any server.

Why Use Aspect Ratio Calculator?

🎨

Visual Live Preview See your changes in real time as you adjust values. No more guessing what CSS properties will look like — experiment visually and copy the code.

📋

Production-Ready CSS The generated code is clean, optimized, and ready to paste directly into your stylesheet. Includes vendor prefixes where needed for cross-browser support.

🔧

Faster Than Hand-Coding What takes 10 minutes of CSS trial-and-error takes 10 seconds with Aspect Ratio Calculator. Adjust sliders and dropdowns instead of editing numbers in code.

💡

Learn CSS Visually Perfect for CSS beginners who want to understand how properties affect visual output. Experiment with values and see the relationship between code and design.

Frequently Asked Questions

Aspect ratio is the proportional relationship between width and height. 16:9 means for every 16 units wide, it's 9 units tall. It describes the shape without specifying actual size.

Use CSS aspect-ratio property: aspect-ratio: 16 / 9. Or use the padding trick: padding-top: 56.25% (9/16 × 100%). The aspect-ratio property is now supported in all modern browsers.

The most common aspect ratios are 16:9 (widescreen TV, YouTube), 4:3 (classic TV, iPad), 1:1 (Instagram square), 9:16 (TikTok, Reels), 21:9 (ultrawide monitors), and 3:2 (DSLR photos).

If you know one dimension and the ratio, multiply or divide accordingly. For example, for a 16:9 ratio with width 1920: height = 1920 × 9 ÷ 16 = 1080 pixels.