Aspect ratio is width divided by height, and that single number is the whole of the arithmetic. 16:9 is 1.777…; multiply or divide by it to get from one dimension to the other.
Written as a:b it is the same fraction reduced — 1920:1080 divided by their greatest common divisor of 120 gives 16:9. Which is why 1920 × 1080 and 640 × 360 are the same ratio at very different sizes.
The ones worth knowing
16:9 — video, screens, YouTube, presentations. The default for everything moving.
9:16 — vertical video. Reels, Shorts, TikTok, stories.
4:5 — the tallest a feed post is allowed on Instagram, and therefore the one that occupies the most screen.
1:1 — square. Avatars, and feed posts where the crop must be predictable.
1.91:1 — the link preview shape, which is what an Open Graph card is cropped to. 1200 × 630 is the usual size.
3:2 — most cameras, and 6 × 4 prints. 4:3 — older screens, iPads, and a good deal of stock photography.
√2:1 — A-series paper, which is the ratio that survives being folded in half. A4 folded gives A5 at the same shape, and no other ratio does that.
Cropping, and what it costs
Changing a ratio means removing pixels or adding empty space. There is no third option.
Cover fills the box and crops the overflow. Right for backgrounds and thumbnails, and it will cut a head off a portrait when the box is wide.
Contain fits the whole image and leaves gaps. Right for logos and diagrams, where losing an edge loses meaning.
The one to avoid is stretching to fit, which distorts everything and is instantly visible on any face. If a ratio has to change, crop deliberately so you choose what goes rather than letting a container decide.
Where the same image is shown at several ratios — a card, a banner, a thumbnail — the subject has to survive the tightest crop. Composing with the important part near the centre is the only reliable answer.
The layout shift problem
An image with no stated dimensions occupies no space until it loads, so the page renders, the image arrives, and everything below it jumps down. It is one of the most common causes of a poor layout-shift score and one of the easiest to fix.
Set width and height attributes on the image. Browsers use them only to compute the ratio and reserve the space — the CSS still controls the rendered size, so this does not fight your stylesheet.
For containers, embeds and video, the CSS aspect-ratio property does the same job, and it replaced the padding-top percentage trick that this used to require.
Resolution is not ratio
"1080p" is a height. "4K" is roughly a width. Neither states a shape, which is why cinema 4K and consumer 4K are different ratios at nearly the same pixel count.
When somebody asks for 16:9 they mean the shape; when they ask for 1080p they mean the size. Supplying one for the other is where most of the confusion in a handoff comes from — and pixel counts have their own confusion.
Working it out
A calculator answers the two questions that come up: what height matches this width at this ratio, and what ratio is this pair of numbers. The second is the one worth doing before assuming — a set of assets that look consistent are frequently three slightly different ratios.
The short version
Width over height, one number, and every ratio question is that arithmetic. 16:9 for video, 9:16 vertical, 4:5 for feeds, 1.91:1 for link previews. Always give an image its dimensions so the page does not jump. And crop on purpose rather than letting a container choose.