What aspect ratio is
It’s the proportion between an image’s width and height, written as width:height. A 1920 × 1080 image and
a 1280 × 720 one have different sizes but the same ratio, 16:9: the second is the first scaled down. That’s why the ratio
is what matters when you design a slot, and the pixel size is what matters when you export.
How it’s calculated
To get the height: height = width × ratio height ÷ ratio width. With a width of 1280 and 16:9, 1280 × 9 ÷ 16 = 720. For the width, the other way round: width = height × 16 ÷ 9. And to find the ratio of a size, divide width and height by their greatest common divisor: 1920 and 1080 divided by 120 give 16 and 9.
Not every size gives a “round” ratio. 1366 × 768, the resolution of many laptops, is 683:384, which in practice is treated as 16:9.
Images with a ratio on ximg.es
The generator accepts the ratio directly in the URL: /1280x16:9 returns a
1280 × 720 image, and /16:9x720 works out the width from the height. If the result isn’t a whole number, it
is truncated: /600x16:9 gives 600 × 337, not 600 × 338.
<img src="https://ximg.es/1280x16:9" width="1280" height="720" alt="">
<img src="https://ximg.es/1080x4:5/e2e8f0/475569.webp" width="1080" height="1350" alt="">aspect-ratio in CSS
The aspect-ratio property reserves the space for an image or video before it loads, so the page doesn’t
jump. With object-fit: cover, any image is cropped to fit the ratio:
.thumbnail {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}If you set width and height on the <img> tag, the browser works out that ratio by itself.