DevBolt
Processed in your browser. Your data never leaves your device.

How do I calculate aspect ratio from width and height?

Enter the width and height in pixels and this calculator instantly shows the simplified ratio (e.g., 16:9), decimal value, CSS aspect-ratio property, visual preview, and a table of equivalent sizes at common resolutions. Use the Resize tab to scale dimensions while preserving proportions, or browse Device Presets for phones, tablets, monitors, and social media formats. Everything runs in your browser — no signup required.

Calculate aspect ratio
Input
Width: 1920
Height: 1080
Output
Aspect Ratio: 16:9
Decimal: 1.778
CSS: aspect-ratio: 16 / 9;

Common name: Full HD / Widescreen
Home/Aspect Ratio Calculator
⊞

Aspect Ratio Calculator

Calculate, convert, and resize aspect ratios for images, video, and responsive design.

Enter Dimensions

Result

16:9
Aspect Ratio
1.7778
Decimal
1920 × 1080
aspect-ratio: 16 / 9;

Common Aspect Ratios

Equivalent Sizes at 16:9

WidthHeightPixelsLabel
3201800.1 MP
4802700.1 MP
6403600.2 MP
7684320.3 MP
9605400.5 MP
10245760.6 MP
12807200.9 MP720p / HD
14408101.2 MP
16009001.4 MP
192010802.1 MP1080p / Full HD
256014403.7 MP1440p / 2K
384021608.3 MP2160p / 4K UHD

Tips & Best Practices

Pro Tip

Use CSS aspect-ratio property instead of the padding-top hack

The old trick of `padding-top: 56.25%` for 16:9 is no longer needed. CSS `aspect-ratio: 16/9` does the same thing with clearer intent and works on any element. Browser support is universal since 2022.

Common Pitfall

Aspect ratio changes when you add borders or padding

With `box-sizing: content-box` (default), padding and borders are added outside the content area, changing the effective aspect ratio. Always use `box-sizing: border-box` with aspect-ratio to ensure the ratio includes padding and borders.

Real-World Example

Common aspect ratios: 16:9 (video), 4:3 (photos), 1:1 (social avatars)

YouTube/Vimeo embeds: 16:9. Instagram posts: 1:1 or 4:5. Twitter/X images: 16:9 or 2:1. Blog hero images: typically 2:1 or 21:9. Knowing these standards helps you create images that display without cropping on each platform.

Security Note

Validate image dimensions server-side to prevent memory exhaustion

An attacker could upload a 50000x50000px image that's only 1MB compressed but requires 10GB of memory when decompressed. Always validate image dimensions server-side and reject images exceeding reasonable limits for your use case.

Frequently Asked Questions

How do I calculate the aspect ratio of an image?
Divide the width by the height to get the decimal ratio (e.g., 1920 ÷ 1080 = 1.7778). To express it as a simplified ratio, find the greatest common divisor (GCD) of both dimensions and divide — 1920:1080 simplifies to 16:9. This calculator does it automatically: enter any width and height to see the simplified ratio, decimal value, equivalent sizes, and the CSS aspect-ratio property.
What is the most common aspect ratio for video?
16:9 is the standard for HD video (720p, 1080p, 4K). Other common video ratios include 4:3 (classic TV/presentations), 21:9 (ultrawide/cinema), 9:16 (vertical video for TikTok/Reels/Shorts), and 1:1 (square, popular on Instagram). The Resize tab lets you scale any of these to a specific pixel width while preserving the ratio.
How do I resize an image without stretching it?
To maintain proportions, you need to keep the same aspect ratio. Enter your original width and height in the Resize tab, then set either the target width or height — the calculator computes the other dimension automatically. This ensures the image scales uniformly with no distortion. In CSS, the 'aspect-ratio' property and 'object-fit: contain' also help maintain ratios responsively.
What does the CSS aspect-ratio property do?
The CSS aspect-ratio property (e.g., aspect-ratio: 16 / 9) tells the browser to maintain a specific width-to-height proportion for an element. It replaced the old padding-top hack for responsive containers. Supported in all modern browsers since 2021. Combined with width: 100% and object-fit: cover, it is the cleanest way to create responsive images and video embeds that never distort.

Related Inspect Tools

CCX

Code Complexity Analyzer

Analyze JavaScript and TypeScript code for cyclomatic complexity, cognitive complexity, nesting depth, and maintainability index with per-function metrics

GHA

GitHub Actions Validator

Validate GitHub Actions workflow YAML files for syntax, triggers, job structure, step config, needs dependencies, and deprecated actions

X/

XPath Tester

Test XPath expressions against XML data with real-time evaluation — select elements, filter by attributes, navigate axes, and use XPath functions

▷

SQL Playground

Run SQL queries in your browser with a full SQLite database powered by WebAssembly — practice JOINs, CTEs, window functions, aggregations, and more