Understanding aspect ratio
Width over height. Everywhere.
The single number behind 16:9 video, square-format social, letter-paper printouts and Cinemascope.
What it is.
Aspect ratio is width divided by height — a single number that captures the shape of a rectangle independent of its size. A 1920×1080 image and a 1280×720 image have the same aspect ratio (1.778, written 16:9), so they look the same on the page; only the resolution differs. Resize either axis without changing that ratio and the image keeps its proportions.
aspect = width / height
Common ratios.
16:9 is the modern video standard — TVs, YouTube, Twitch, conference monitors. 4:3 is the older 35mm-derived shape, still common in slide decks. 1:1 is square, the Instagram default that became everyone's profile photo. 3:2 is most digital cameras and the original 35mm film. 2.39:1 is modern Cinemascope. Each ratio carries cultural weight: square reads as social, 16:9 as cinematic, 4:3 as nostalgic.
Resizing without distortion.
To resize an image to a target width while keeping its shape, divide the new width by the old aspect ratio. Going the other way: target height times aspect ratio gives the matching width. The arithmetic is one line; the bug-prone part is remembering which axis you measured in which units.
A 16:9 frame at 600 wide
aspect = 16 / 9 = 1.778
Divide the new width by the aspect to get the matching height.
600 / 1.778 = 337.5
= 600 × 337.5
The CSS aspect-ratio property.
For years the trick to enforce an aspect ratio in CSS was the padding hack — set padding-bottom to a percentage of the width. CSS now ships aspect-ratio as a first- class property: aspect-ratio: 16 / 9. The element computes its missing dimension from whichever side you've fixed. Modern browsers all support it; the padding hack is now legacy.
Why this prevents layout shift.
When an image loads asynchronously, the browser doesn't know its size until the bytes arrive — and inserting that size mid-load shifts every element underneath. Cumulative Layout Shift (CLS) is one of the Core Web Vitals; bad CLS hurts SEO and feels jarring. Setting aspect-ratio on the image (or its container) reserves the right space ahead of time, so the load fills it cleanly. The same trick works for embedded video, iframes and ads.
Beyond rectangles.
Aspect ratio also matters in print (A4 is roughly 1:√2, chosen so two halves of an A4 sheet have the same ratio as the original), in monitors (ultrawide 21:9), and in physical product design — phones grew taller (19.5:9, 20:9) because the human grip suits a thin tall shape better than the chunkier proportions of early smartphones. Picking a ratio is picking a feeling.
Read next