Aspect Ratio Calculator
Calculate and convert aspect ratios for responsive design, video, and images. Supports common presets and custom ratios.
About This Tool
The Aspect Ratio Calculator is a free browser-based tool that helps developers, designers, and content creators work with aspect ratios across different media formats. Whether you are building responsive layouts, editing video, cropping images, or defining CSS properties, this calculator makes it easy to determine the correct proportions for any dimension.
Enter any width and height in pixels, and the tool instantly
computes the simplified ratio using the greatest common divisor
(GCD) algorithm. For example, entering 1920 by 1080 yields the
well-known 16:9 ratio. It also displays the decimal equivalent
(1.7778) and the CSS aspect-ratio property value, so
you can copy it directly into your stylesheets.
The resize calculator lets you lock the current ratio and compute one dimension from the other. This is especially useful when you need to scale assets proportionally: enter the target width, and the height is filled in automatically (or vice versa). The lock toggle gives you full control over when the ratio constraint is applied.
A grid of common presets covers the most frequently used ratios in video production (16:9, 21:9, 2.39:1), photography (3:2), traditional monitors (4:3, 5:4), square formats (1:1), and mobile-first content (9:16). Click any preset to load it instantly. The visual preview box updates in real time so you can see the proportions at a glance.
The resolution table lists standard screen resolutions for the active ratio, from small mobile sizes up to 4K UHD. Click any row to copy the resolution string. All processing happens entirely in your browser using native JavaScript arithmetic — no data is ever sent to any server, making it safe for proprietary design specs.
How to Use
- Enter a Width and Height in the calculator panel to see the simplified ratio, decimal value, and CSS property.
- Click any Common Preset button (e.g. 16:9, 4:3) to load a standard ratio instantly.
- Use the Resize Calculator to find matching dimensions. With the ratio locked, enter either the new width or new height — the other dimension is calculated automatically.
- Review the Visual Preview to confirm the proportions look correct for your use case.
- Browse the Resolution Table for common screen resolutions matching your ratio. Click any row to copy it.
- Click the Copy buttons next to any value (ratio, decimal, CSS) to copy it to your clipboard. Keyboard shortcut: Ctrl+Shift+C copies the CSS aspect-ratio value.
FAQ
What is an aspect ratio?
An aspect ratio is the proportional relationship between the width and height of a rectangle. It is typically expressed as two numbers separated by a colon (e.g. 16:9), meaning the width is 16 units for every 9 units of height. Aspect ratios are used in video, photography, screen design, and CSS to maintain consistent proportions when resizing.
How does the GCD simplification work?
The tool uses the Euclidean algorithm to find the greatest common divisor (GCD) of the width and height. Both values are divided by the GCD to produce the simplest integer ratio. For example, 1920 and 1080 have a GCD of 120, so dividing both by 120 gives 16:9.
What is the CSS aspect-ratio property?
The aspect-ratio CSS property sets a preferred aspect ratio for a box, which is used to calculate auto sizes. For example, aspect-ratio: 16 / 9; makes the element maintain a 16:9 proportion. It is supported in all modern browsers and is widely used for responsive images, videos, and card layouts.
What is the most common aspect ratio for video?
The most common aspect ratio for modern video is 16:9 (widescreen), used by YouTube, streaming platforms, and broadcast television. Cinema typically uses wider ratios like 1.85:1 (theatrical) or 2.39:1 (Cinemascope/anamorphic). For mobile-first content like TikTok, Instagram Reels, and YouTube Shorts, the vertical 9:16 ratio is standard.
Can I use decimal ratios like 1.85:1?
Yes. You can enter decimal values for width and height (e.g. 1.85 and 1). The tool will simplify the ratio by scaling up to integers before applying the GCD algorithm. This is useful for cinema ratios and other non-integer proportions.
Is my data safe?
Yes. All calculations are performed entirely in your browser using basic JavaScript arithmetic. No data is sent to any server, no cookies are set, and no third-party scripts are involved. Your dimensions and design specifications remain completely private.
What resolution should I use for 16:9 content?
Common 16:9 resolutions include 1280x720 (HD/720p), 1920x1080 (Full HD/1080p), 2560x1440 (QHD/1440p), and 3840x2160 (4K UHD). For web use, 1920x1080 is the most widely used. For social media thumbnails and previews, 1280x720 is a common choice. The resolution table in this tool lists all standard sizes for any ratio.
Related Tools
px ↔ rem Converter
Convert between px, rem, and em CSS units with a configurable base font size and quick-reference table.
Color Converter
Convert colors between HEX, RGB, HSL formats with contrast checker and palette generator.
CSS Layout Generator
Visually build Flexbox and CSS Grid layouts with live preview and generated CSS code.
Image Compressor
Compress images in your browser with quality and resize controls. Compare file sizes before and after.
Image Cropper
Crop images to custom dimensions with rectangle and circle modes. All processing in your browser.
Math Expression Evaluator
Evaluate mathematical expressions with support for basic arithmetic, functions, and constants.