An aspect ratio is the width of a rectangle divided by its height. Everything else, the 16:9 notation, the “21:9” on a monitor box, the aspect-ratio property in CSS, is a way of writing that one division. This guide works through the arithmetic: how to reduce a pair of pixel dimensions to a ratio, how to find a missing side, how to fit one ratio inside another, and why some common screens do not reduce to the ratio they are sold as. Every number below is what the Aspect Ratio Calculator shows for the same input, and the site’s tests recompute them from the calculator’s code.

The Aspect Ratio Formula

For a width W and a height H:

aspect ratio = W : H = (W ÷ g) : (H ÷ g)    where g = gcd(W, H)
decimal form = W ÷ H

The colon form divides both sides by their greatest common divisor (GCD), the largest whole number that divides both, so the ratio is in lowest terms. The decimal form is the same value as a single number, often written with :1. For 1920 × 1080, the GCD is 120, so the ratio is 16:9, and 1920 ÷ 1080 = 1.7778, which can also be written 1.78:1.

The ratio describes shape, not size. 1280 × 720, 1920 × 1080 and 3840 × 2160 are all 16:9 because each is 16 × 9 scaled by a whole number (80, 120 and 240). Two sizes have the same shape exactly when their decimal values are equal, which gives a quick check without simplifying anything: 2560 × 1440 is 16:9 because 2560 ÷ 1440 = 1.7778 too.

Finding the GCD by Hand

The Euclidean algorithm finds the GCD with nothing but division. Divide the larger number by the smaller, keep the remainder, and repeat with the smaller number and the remainder until the remainder is 0. The last non-zero remainder is the GCD.

1920 = 1 × 1080 + 840
1080 = 1 × 840 + 240
 840 = 3 × 240 + 120
 240 = 2 × 120 + 0      → gcd = 120, ratio 1920/120 : 1080/120 = 16:9

The same steps for a 34-inch ultrawide monitor:

3440 = 2 × 1440 + 560
1440 = 2 × 560 + 320
 560 = 1 × 320 + 240
 320 = 1 × 240 + 80
 240 = 3 × 80 + 0      → gcd = 80, ratio 43:18

In code the loop is one line. The calculator does the same thing, rounding each side to a whole number first:

function gcd(a, b) { while (b) [a, b] = [b, a % b]; return a; }
function aspectRatio(w, h) { const d = gcd(w, h); return `${w / d}:${h / d}`; }
function heightFor(width, ratioW, ratioH) { return width * ratioH / ratioW; }

console.log(aspectRatio(1920, 1080));
console.log(aspectRatio(3440, 1440));
console.log(aspectRatio(1366, 768));
console.log(heightFor(1000, 16, 9));
console.log((2560 / 1080).toFixed(4));

Ratios That Do Not Simplify Cleanly

Many real sizes are not an exact multiple of a tidy ratio. 1366 × 768, a common laptop panel for years, has a GCD of only 2, so the calculator shows 683:384. Compare decimals instead: 1366 ÷ 768 = 1.7786 against 1.7778 for 16:9, a difference of 0.05%. A 16:9 panel 768 pixels tall would be 768 × 16 ÷ 9 = 1365.33 pixels wide, and 1366 is that value rounded up to a whole, even number.

“21:9” ultrawide monitors are a stronger case. 21 ÷ 9 = 2.3333, but the two common resolutions are 2560 × 1080 (64:27, 2.3704) and 3440 × 1440 (43:18, 2.3889). Neither is 21:9, and they are not even the same shape as each other. “21:9” is a marketing label for “about 2.37:1”, the same neighbourhood as the 2.39:1 used for widescreen cinema.

To find the nearest simple ratio, look for the fraction with a small denominator that is closest to the decimal. Python’s fractions module does this directly:

from fractions import Fraction

print(Fraction(1920, 1080))                         # exact, in lowest terms
print(Fraction(1366, 768).limit_denominator(20))    # nearest with denominator ≤ 20
print(Fraction(2560, 1080).limit_denominator(10))
print(Fraction(3440, 1440).limit_denominator(10))

With denominators up to 10, the closest fraction to 2560 × 1080 is 19:8 and to 3440 × 1440 is 12:5, not 7:3 (which is 21:9 in lowest terms). That is a useful sanity check whenever a product page and the pixel count disagree.

Finding a Missing Width or Height

When the ratio is fixed and one side is known, cross-multiply:

new height = new width × H ÷ W
new width  = new height × W ÷ H

Keep the 16:9 shape at a width of 1280 and the height is 1280 × 9 ÷ 16 = 720. A 4:5 portrait image 1080 pixels wide is 1080 × 5 ÷ 4 = 1350 tall, and a 9:16 vertical video 1080 pixels wide is 1920 tall. When the answer is not a whole number, the pixel count has to be rounded: a 16:9 image 1000 pixels wide would be 562.5 pixels tall. The calculator’s resize fields round to the nearest whole pixel and show 563, which is half a pixel off the true ratio. Widths that are multiples of 16 always give whole heights at 16:9, and in general a width that is a multiple of the ratio’s first number avoids the rounding.

The calculator’s Lock Ratio box applies the same formula while you edit the main width and height. It stores width ÷ height when you tick it and recomputes the other side from that stored value each time, so typing 1000 and then 1920 as the width returns the height to 1080 instead of drifting.

Fitting One Ratio Inside Another

Showing a picture of one shape on a screen of another shape leaves two choices: scale it until it fits inside (bars on two sides) or scale it until it covers the screen (parts are cropped).

fit inside (contain):  scale = min(screenW ÷ W, screenH ÷ H)
fill and crop (cover): scale = max(screenW ÷ W, screenH ÷ H)

A 2.39:1 film on a 1920 × 1080 screen is limited by width: 1920 ÷ 2.39 = 803 pixels tall, leaving about 138 pixels of black above and below. That is letterboxing. A 4:3 picture on the same screen is limited by height: 1080 × 4 ÷ 3 = 1440 pixels wide, leaving 240 pixels at each side. That is pillarboxing. Using cover instead, the 4:3 picture is scaled to 1920 wide and 1440 tall, and 360 pixels of height are cut off.

The 16:9 shape itself came out of this problem. SMPTE engineer Kerns Powers chose it as a compromise between 4:3 television and 2.35:1 cinema: 16:9 = 1.7778 is close to the geometric mean of the two, √(1.3333 × 2.35) = 1.7701, so both kinds of material lose about the same share of the screen (Wikipedia: 16:9 aspect ratio).

Common Resolutions and Their Exact Ratios

The ratio and decimal columns are the calculator’s output for each size.

ResolutionRatioDecimalWhere it is used
640 × 4804:31.3333VGA
1024 × 7684:31.3333XGA projectors
1280 × 72016:91.7778HD video
1366 × 768683:3841.7786Budget laptop panels
1440 × 9008:51.600016:10 laptop panels
1920 × 108016:91.7778Full HD, ITU-R BT.709
1920 × 12008:51.600016:10 monitors
2560 × 108064:272.3704Ultrawide, sold as 21:9
2560 × 144016:91.7778QHD monitors
2560 × 16008:51.600016:10 laptops and tablets
2256 × 15043:21.5000Surface Laptop 13.5-inch
3440 × 144043:182.3889Ultrawide, sold as 21:9
3840 × 216016:91.77784K UHD, ITU-R BT.2020
4096 × 2160256:1351.8963DCI 4K cinema container
7680 × 432016:91.77788K UHD, ITU-R BT.2020
1080 × 10801:11.0000Square social posts
1080 × 13504:50.8000Portrait feed images
1080 × 19209:160.5625Vertical video

The broadcast formats are defined in ITU-R BT.709 (1920 × 1080) and ITU-R BT.2020 (3840 × 2160 and 7680 × 4320). 16:10 is written 8:5 in lowest terms, so a calculator that reduces fully shows 8:5. DCI 4K is wider than UHD 4K: the cinema container is 4096 pixels across, so “4K” alone does not tell you the shape.

Pixel Aspect Ratio and Display Aspect Ratio

Everything above assumes square pixels, which is true for computer displays, phone screenshots and almost all web images. Some video formats store non-square pixels and stretch them on playback. Standard-definition DVD video is 720 × 480 pixels whether the picture is 4:3 or 16:9; by the GCD that grid is 3:2, but the player shows it at 4:3 or 16:9 using a pixel (sample) aspect ratio stored in the stream. FFmpeg’s setdar and setsar filters expose the relationship: display aspect ratio = (width ÷ height) × sample aspect ratio. For a 720 × 480 frame shown at 4:3, the sample aspect ratio is (4/3) ÷ (3/2) = 8:9.

If a video looks squashed after editing, check whether the tool that exported it kept the sample aspect ratio. A pixel-dimension calculator, this one included, only sees the stored grid.

Aspect Ratio in CSS

CSS takes the ratio as a fraction. The aspect-ratio property sets the preferred shape of a box whose width is known, and the browser computes the height:

.video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.thumbnail img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover; /* crop to the square instead of stretching */
}

MDN’s compatibility data lists aspect-ratio from Chrome and Edge 88, Firefox 89 and Safari 15. Before that, the usual workaround was a container with height: 0 and padding-top: 56.25%, because vertical padding percentages are computed from the width and 9 ÷ 16 = 0.5625. The same arithmetic gives 75% for 4:3 and 125% for 4:5. For images, object-fit: contain and object-fit: cover are the browser’s built-in versions of the fit-inside and fill-and-crop formulas above.

Giving <img> and <video> elements explicit width and height attributes also helps: browsers derive a default aspect ratio from them, so the box keeps its shape before the file has loaded and the page does not jump.

Using the Calculator

Type a width and height into the Aspect Ratio Calculator to see the reduced ratio, the decimal to four places and a preview of the shape. The presets set the size to 120 times the ratio’s numbers, so 21:9 becomes 2520 × 1080 and is shown in lowest terms as 7:3. The Resize fields scale the current size to a new width or height. Decimal sizes are accepted, but the ratio is computed from the rounded values, so 1.5 × 1 shows 1.5:1. The calculator works out numbers only. To scale an actual image, the Image Compressor can shrink an image so its long edge is no larger than a pixel size you choose, keeping the ratio, and the Image Splitter cuts an image into tiles such as a 3 × 3 grid of squares.