What an aspect ratio is, and where the common ones are used
An aspect ratio is the shape of a rectangle, written as its width against its height. A picture 1920 pixels wide and 1080 high has the ratio 1920:1080, which divides down to 16:9: for every 16 units across there are 9 down. The size can change while the ratio stays the same, and that is the whole use of it. 1280 x 720, 1920 x 1080 and 3840 x 2160 are three sizes of one shape, so a video made at one of them fills a frame made for another with nothing cropped and nothing stretched.
How the sums work
To simplify a ratio, divide both sides by the largest number that goes into both. For 1920 and 1080 that number is 120, which gives 16 and 9. To resize, multiply: the new height is the new width times the old height, divided by the old width. When the answer is not a whole number of pixels the calculator rounds it and says so, because half a pixel cannot be drawn.
Where the common ratios are used
- 16:9 is video, television, presentation slides and most laptop and desktop screens.
- 4:3 is older screens and video, many tablets, and most photographs taken on a phone.
- 3:2 is photographs from most cameras with changeable lenses, and some laptop screens.
- 1:1 is a square: profile pictures, product grids and square posts.
- 4:5 is an upright post in a social feed.
- 9:16 is 16:9 turned on its end: stories, reels and other full-screen video on a phone.
- 21:9 is ultrawide monitors and wide, cinema-style banners.
Aspect ratio in CSS
A web page often has to hold a space for an image or a video before it has loaded, or everything under it jumps when it arrives. The aspect-ratio property does that in one line: give an element a width and aspect-ratio: 16 / 9, and the browser works out the height. Every current browser supports it.
Before it existed, the same effect came from padding. A percentage of padding-top is measured against the element’s width, so padding-top: 56.25% (9 divided by 16) on an element with no height of its own makes a 16:9 box, with the content placed over it. You will still meet that in older themes and in the embed codes of video players, which is why the calculator gives both.