Tools — 02
A frame decides what the picture is about.
The same photograph reads as reportage at 3:2, as fashion at 4:5, and as cinema at 21:9. Choosing a ratio is an editorial decision that happens to require arithmetic — so here is the arithmetic, in three directions.
AI editorial placeholder — /editorial/10-studio-detail.avif
WidescreenThe same crop, held at 16:9. Change the ratio below and this frame follows.
The three calculations
Platform presets
Ratio → dimension
You know the shape and one side.
810 px high
1440 × 810 px
16:9 — Widescreen
aspect-ratio: 16 / 9;Dimension → ratio
You have pixels and need the notation.
16:9 Widescreen
16:9 — Widescreen
1920 × 1080 px
aspect-ratio: 16 / 9;Resize
Keep the proportion, change the size.
675 px high
1200 × 675 px
scale: 0.625×Live proportion
16 : 9 — Widescreen
Reference
| Ratio | Name | Typical use | Example |
|---|---|---|---|
| 16:9 | Widescreen | Video, presentation, hero banner | 1920 × 1080 |
| 9:16 | Vertical | Stories, reels, mobile full screen | 1080 × 1920 |
| 1:1 | Square | Avatar, feed post, grid tile | 1080 × 1080 |
| 4:5 | Portrait | Editorial portrait, feed post | 1080 × 1350 |
| 3:2 | Classic 35mm | Photography, print | 2400 × 1600 |
| 4:3 | Standard | Legacy screen, some sensors | 1600 × 1200 |
| 21:9 | Cinemascope | Cinematic crop, wide hero | 2560 × 1097 |
| 2:3 | Editorial portrait | Magazine page, poster | 1600 × 2400 |
Reference
An aspect ratio is width divided by height, reduced to its smallest whole numbers by the greatest common divisor — 1920 × 1080 reduces to 16:9. To find a missing dimension, multiply the known side by the ratio: height = width × 9 / 16.
How do you calculate an aspect ratio from pixel dimensions?
Divide both dimensions by their greatest common divisor. For 1600 × 1200 the divisor is 400, which gives 4:3.
Reduction is what makes ratios comparable: 1920 × 1080 and 1280 × 720 are different sizes but the same 16:9 shape, and only the reduced form shows that.
How do you resize an image without distorting it?
Keep the ratio constant and solve for the side you do not know. New height = new width × original height / original width.
Rounding is where proportional resizes go wrong. 2560 / 21 × 9 is 1097.14, so a 21:9 frame at 2560px wide is 1097px tall and off by a seventh of a pixel — visible as a one-pixel seam when tiles sit edge to edge.
When should you use the CSS aspect-ratio property instead?
Use `aspect-ratio` in CSS whenever the browser can reserve the space itself, because it prevents layout shift: the box has a height before the image arrives. Combined with width and height attributes on the element, it is the single most effective fix for Cumulative Layout Shift caused by media.
Calculate a fixed pixel size instead when you are exporting an asset, specifying a crop, or handing dimensions to someone else.
Common questions
- What aspect ratio is 1920 × 1080?
- 16:9. Both numbers divide by 120, giving 16 and 9. It is the standard widescreen ratio for video and most displays.
- Is 16:9 the same as 1.78:1?
- Effectively yes. 16 divided by 9 is 1.777…, which film notation rounds to 1.78:1. The two notations describe the same shape; whole-number pairs are used on the web, decimal-to-one in cinema.
- How do I keep an image from causing layout shift?
- Set the CSS aspect-ratio property, or the width and height attributes, so the browser reserves the correct box before the file loads. Without it the page reflows when the image arrives, which is counted as Cumulative Layout Shift.