BrowserTools

Aspect Ratio Calculator

Scale dimensions without distortion

By Guga — BrowserTools maintainer, Tbilisi, Georgia Updated 2026-09-12
Free Private No uploads
What is Aspect Ratio Calculator?

Aspect ratios are the reason a thumbnail ends up letterboxed or a photo stretches. Supply the current width and height, then one dimension you want to change, and the tool hands back the other so the proportions hold. A 1920 by 1080 frame narrowed to 1280 wide comes out at 1280 by 720, and a portrait crop of the same original forced to 720 tall gives 480 by 720. It also reduces the original pair to lowest terms with a greatest common divisor, so 1920 by 1080 is reported as the familiar 16:9 rather than a pair of large numbers, and prints the decimal form to four places for ratios that do not reduce cleanly. That decimal is the value to type into a CSS aspect-ratio rule or a video export dialog.

Calculate matching dimensions for any aspect ratio — enter an original width and height and a target size to keep the image perfectly proportional. Essential for design and video work.

Private Aspect Ratio Calculator In Your Browser

Aspect Ratio Calculator is processed locally with client-side JavaScript. Your files never touch a server, and there is no queue to wait in.

Step-by-Step

How to use Aspect Ratio Calculator

1

Enter the current Width and Height of the source image or video.

2

Type your desired figure into the New width (or height) field.

3

Use the `The new value is` selector to declare whether that figure is a width or a height.

4

Read the matching dimension, then copy the reduced ratio or the decimal form for use in CSS or export settings.

Key Capabilities
  • The source pair is reduced to lowest terms by greatest common divisor, so 1920:1080 is reported as 16:9 and 1024:768 as 4:3.
  • A selector decides whether your new figure is a width or a height, which keeps the calculation unambiguous in portrait as well as landscape.
  • A decimal form printed to four places covers ratios that do not reduce to whole numbers.
  • The matching dimension is rounded to whole pixels, which is the precision an export dialog or an image editor will use anyway.
Common Use Cases
  • A designer resizes a hero image to fit a new container width and needs the exact height that will not distort it.
  • A video editor exports a 16:9 project to a 1:1 or 9:16 deliverable and needs the matching dimension.
  • A developer sets an aspect-ratio rule in CSS and wants the decimal value rather than the fraction notation.
Clear Answers

Frequently Asked Questions

Why did my matching height come out as a fraction?
Exact proportions often need fractional pixels. The matching value is rounded to the nearest whole pixel for you, since image and video dimensions are integers in practice.
What if my ratio does not reduce, like 1000 by 700?
The decimal form handles it. The largest common divisor is 100, so the reduced ratio is 10:7 and the decimal is printed to four decimal places.
Does it crop as well as scale?
No. It only computes a proportional scale, so nothing is removed from the frame. To fill a different shape you would crop to the new ratio after scaling.
Can I use the decimal in CSS?
Yes. Write it as `aspect-ratio: 1.7778`, using the decimal value the tool prints.

Related Guides

View all guides →
webdevPX vs REM vs EM: Which Unit Belongs Wherepx ignores the font size a reader has set, rem follows the root element, and em follows the parent, so nesting em compounds while rem never surprises you. That single difference is the whole accessibility case for font-size guidance, and it is what decides where each unit belongs in a layout. The rule of thumb, the arithmetic and the traps are below; to convert one specific value, the PX to REM converter linked from this guide does it instantly.