Reducing a ratio
Divide both dimensions by their greatest common divisor and you have the ratio in lowest terms. 1920 and 1080 share a divisor of 120, so the ratio is 16:9. 2560 and 1600 share 320, which gives 8:5 — the same number as 16:10, which is what everyone calls that shape, so both are shown.
Then there is 1366 x 768, which was the resolution of a decade of cheap laptops. Its greatest common divisor is 2, so the reduced ratio is 683:384. That is not 16:9. As a decimal it is 1.7786 against 16:9's 1.7778, a difference of about 0.05%, which is invisible on screen and irrelevant for layout — but it is real, and it is why a 1366-wide screenshot scaled to exactly 16:9 comes back one pixel off. The panel was 768 tall because 1366 x 9 / 16 is 768.4, and you cannot have four tenths of a pixel. Anything that reports the ratio as exactly 16:9 has rounded for you without saying so.
Getting the other dimension
New height equals new width divided by the original ratio, and new width equals new height times it. 1920 x 1080 at 1280 wide gives 1280 / 1.7778, which is 720 exactly. Most numbers are not that tidy: 1366 wide reduced to 1000 gives 562.2 tall.
Round it, but know what you are rounding for. Video encoders built on H.264 and H.265 work in macroblocks and want both dimensions even; some profiles want multiples of four or eight and will silently pad if they do not get them. Sprite sheets and icon sets care about the exact integer more than the exact ratio. Print work cares about neither, because the ratio there is set by the paper. The calculator shows the unrounded figure, the nearest integer and the nearest even number so you can pick.
Cover, contain, and what gets lost
When the target shape differs from the source, something has to give. Contain scales the image until it fits entirely inside the box, which leaves bars on two sides. Cover scales until the box is entirely filled, which pushes part of the image outside the frame. In CSS these are the values of object-fit; in editing software they are usually called fit and fill.
The number worth having before you commit is how much cover throws away. Fitting a 4:3 photo into a 16:9 frame crops roughly a quarter of the height, and it comes off the top and bottom equally unless you move the focal point. That is the difference between a portrait with headroom and a portrait with the top of a head missing, which is why platforms that crop aggressively — Instagram's grid, most link previews — reward composing with margin around whatever matters.
Holding a ratio in CSS
Modern browsers take aspect-ratio: 16 / 9 directly on the element and that is the whole answer. The older technique, still worth recognising in existing stylesheets, is a container with zero height and padding-top: 56.25% — padding percentages resolve against the width, so the box gets a height proportional to how wide it ends up, and the content is positioned absolutely inside it. 56.25 is 9 divided by 16; the calculator prints that percentage for whatever ratio you enter.
If you are supporting anything old enough to need the padding trick, be aware that it interacts badly with flex and grid children, which is the usual reason it appears to be ignored. Set it on a plain block wrapper rather than on the flex item itself.
Questions people ask
Why does 1366 x 768 come out as 683:384 instead of 16:9?
Because 683 and 384 have no common factor, so that is genuinely the lowest-terms ratio. 1366 x 768 is not a 16:9 resolution — true 16:9 at 1366 wide would be 768.375 tall. The panel makers picked 768 because it is a round number and the 0.05% error is undetectable. In practice treat it as 16:9: video will play with a sub-pixel letterbox nobody can see. The distinction matters only if you are generating assets at an exact ratio and comparing them pixel for pixel against a 1366-wide capture.
My resize gives a fractional height. Round up or down?
Down is the marginally safer default because it never overflows a container, but the honest answer is that a half pixel of ratio error is below what any display can show. What does matter is the constraint the file has to satisfy. Video: round to an even number, both dimensions. Anything going into a texture atlas or an older GPU pipeline: powers of two if the toolchain still asks for them. Everything else: nearest integer and move on.
How do I fill a 16:9 frame with a 4:3 photo without squashing it?
You crop. Enter both the new width and the new height and the cover line tells you the scaled size and exactly how many pixels fall outside the frame — for 4:3 into 16:9 it is about 25% of the height. If losing that is unacceptable, the alternatives are contain, which puts pillarbox bars down the sides, or a blurred enlarged copy of the same image behind it, which is what most video players do and what social platforms auto-generate.
Are the platform sizes in the table current?
They were checked against published guidance and they will drift. Every service in that table re-encodes and re-crops uploads, changes safe areas when it redesigns, and rarely announces it. Use the sizes as sensible defaults — they are all standard ratios at sane resolutions, so nothing there will actively hurt you — and verify against the platform help page for anything where a bad crop costs money.