Aspect Ratio Calculator
Lock an aspect ratio and solve any missing dimension instantly. Get the simplified ratio, a live shape preview, and matching standard resolutions — all in your browser.
How to Use
- Enter your original width and height — together they define the aspect ratio you want to keep.
- Read the simplified ratio (for example 1920 × 1080 reduces to 16:9) shown beneath the inputs.
- Type a new width OR a new height; the calculator fills in the other so the proportions stay locked.
- Click a preset button (16:9, 4:3, 21:9, 1:1, 3:2, 9:16) to snap to a common ratio and recompute.
- Use the shape preview to confirm the rectangle looks the way you expect before you commit.
- Pick from the list of common resolutions that match your current ratio when you need a standard size.
Type a new width or a new height — the other field fills in to keep the locked ratio. Results round to the nearest whole pixel.
How aspect ratio works
An aspect ratio is the proportion of an image or screen’s width to its height, written as two numbers with a colon between them — 16:9, 4:3, 1:1. It is a description of shape, completely independent of size. A tiny thumbnail and a giant billboard can share the exact same aspect ratio; what they share is the rectangle’s proportions, not its pixel count. That is why a 1280 × 720 photo and a 3840 × 2160 photo look the same shape on screen: both reduce to 16:9.
To turn a pixel size into a clean ratio, you divide both numbers by their greatest common divisor (GCD). The GCD of 1920 and 1080 is 360, and dividing each by 360 gives 16 and 9 — hence 16:9. This calculator runs the same Euclidean GCD reduction live as you type, so any size you enter is shown in its simplest proportional form. Reducing the ratio is what lets you reason about and compare sizes without drowning in raw pixel counts.
Resizing without distortion
The most common reason to reach for an aspect ratio calculator is resizing. When you scale an image, you must change width and height together by the same factor, or the picture stretches and squashes. The math is simple proportion: once a width and height define a ratio, a new height is newWidth × originalHeight ÷ originalWidth, and a new width is newHeight × originalWidth ÷ originalHeight. Lock the ratio, change one dimension, and the other follows automatically — which is exactly what the inputs above do. Because pixels are whole, results are rounded to the nearest integer; for ratios like 16:9 most target sizes land exactly, while odd source sizes may round by a pixel or two.
When content of one ratio has to fit a display of another, the system either crops, stretches, or adds bars. Adding bars preserves the proportions: letterboxing places horizontal bars above and below wider content shown on a narrower screen, and pillarboxing places vertical bars on the sides of narrower content shown on a wider screen. Both are the “safe” choice because nothing is distorted — you simply see the unused space.
Common ratios reference
Using ratios in CSS
Modern CSS has a dedicated aspect-ratio property that reserves space by proportion instead of by fixed pixels. Writing aspect-ratio: 16 / 9; on a container tells the browser to keep that shape as the element’s width changes, which is ideal for responsive video embeds, image placeholders, and card grids. It also prevents the dreaded layout shift that happens when an image loads after the surrounding text has already flowed. Every value this calculator produces — the simplified ratio and the matching resolutions — drops straight into that property, so you can move from working out the numbers to shipping responsive markup in one step. Everything here runs entirely in your browser; nothing is uploaded.
About the Aspect Ratio Calculator
Use the Aspect Ratio Calculator — a free, easy tool for web development and data tasks. Nothing is uploaded, and you do not need an account. Lock an aspect ratio and solve any missing dimension instantly. Get the simplified ratio, a live shape preview, and matching standard resolutions — all in your browser.
How it works
Put each value in its box and read the answer as you go. Because it recalculates live, you can play with the inputs to see how each one moves the result — handy for checking your own working or planning ahead. Everything happens on your device, so it is fast and private.
Want the deeper story? The Knowledge Base explains the ideas behind the tools in more detail.
Frequently Asked Questions
What is an aspect ratio?
An aspect ratio is the proportional relationship between an image or screen's width and height, written as two numbers separated by a colon, such as 16:9. It describes shape, not size: a 1280 × 720 image and a 1920 × 1080 image are physically different sizes but share the same 16:9 aspect ratio, so they look identical in proportion. The ratio is found by dividing both dimensions by their greatest common divisor (GCD), which reduces 1920:1080 down to its simplest form, 16:9.
What are the most common aspect ratios?
<strong>16:9</strong> is the modern widescreen standard for HDTV, YouTube, and most monitors. <strong>4:3</strong> is the classic standard from older TVs and many tablets/photos. <strong>21:9</strong> (ultrawide) is used for cinematic monitors and films. <strong>1:1</strong> is the square format favored by social feeds. <strong>3:2</strong> comes from 35 mm photography and many cameras. <strong>9:16</strong> is the vertical format for phone video, Stories, and Reels.
How do I keep proportions when resizing?
Fix one dimension and compute the other from the original ratio. To find a new height from a chosen width: newHeight = newWidth × originalHeight ÷ originalWidth. To find a new width from a chosen height: newWidth = newHeight × originalWidth ÷ originalHeight. This calculator does exactly that — type one new dimension and it solves the matching one so the shape never distorts (no stretching or squashing).
What's the difference between aspect ratio and resolution?
Resolution is the exact pixel count, like 1920 × 1080. Aspect ratio is the simplified proportion of those numbers, like 16:9. Many different resolutions share one aspect ratio: 1280 × 720, 1920 × 1080, 2560 × 1440, and 3840 × 2160 are all 16:9. Ratio tells you the shape; resolution tells you the detail and file size.
What are letterboxing and pillarboxing?
They are the bars added when content's aspect ratio does not match the display's. <strong>Letterboxing</strong> adds horizontal black bars above and below — it happens when wider content (like a 21:9 film) is shown on a less-wide screen (like 16:9). <strong>Pillarboxing</strong> adds vertical bars on the left and right — it happens when narrower content (like 4:3) is shown on a wider screen. Both preserve the original proportions instead of stretching the image.
Is there a CSS aspect-ratio property?
Yes. The CSS <code>aspect-ratio</code> property lets you reserve space for an element by ratio rather than fixed pixels, e.g. <code>aspect-ratio: 16 / 9;</code>. The browser then sizes the box to keep that proportion as its width changes — ideal for responsive images, video embeds, and cards. It is supported in every modern browser and prevents layout shift while media loads.
How do I use the Aspect Ratio Calculator?
Just type your numbers. The answer shows up right away — there is no button to press. Change anything and it updates by itself.
Do I need to install or sign up for anything?
Not at all — it runs in the browser with nothing to install and no account. After it loads once, it even works without an internet connection.
Is my information private?
Yes. Everything happens in your browser. Nothing you type is sent to a server or saved anywhere.
Common Use Cases
Resizing images without distortion
Lock the original ratio, type the target width, and get the exact height so photos and graphics never stretch.
Planning video exports
Confirm 16:9, 9:16, or 21:9 dimensions for YouTube, Reels, or cinematic cuts before you render.
Setting up responsive embeds
Find the ratio to plug into the CSS aspect-ratio property so iframes and videos scale cleanly.
Designing social media assets
Snap to 1:1 squares or 9:16 verticals and pull the right pixel size for each platform.
Cropping to a target shape
Reduce a source size to its simplest ratio so you know exactly what shape you are cropping toward.
Matching a monitor or canvas
Pick a standard resolution from the matching-resolutions list for screens, banners, or print canvases.
Last updated: