# Aspect ratios explained: 1:1, 4:5, 9:16, 16:9 and more

[Canonical HTML page](https://gradiently.design/guide/aspect-ratios-explained)

Pixel sizes change from platform to platform, but there are only a handful of shapes. Learn those, and the maths that connects them, and you will never squash a design again.

## The short version

- An aspect ratio is the proportional relationship between an image's width and its height, written as width:height.
- To find the aspect ratio of any size, divide both numbers by their greatest common divisor, so 1920×1080 becomes 16:9.
- To get a new size in the same aspect ratio, multiply the new width by the ratio's height and divide by its width.
- The ratios that matter most for social media are 1:1, 4:5, 9:16, 16:9 and 1.91:1.
- Changing an image to a different aspect ratio always means cropping, adding space or laying the design out again; stretching distorts it.

An **aspect ratio** is the shape of an image: its width compared with its height, written as two numbers such as 16:9. A 1920×1080 video and a 1280×720 thumbnail have different sizes but the same 16:9 aspect ratio, so one scales into the other without cropping. Most design problems with "the wrong size" are really problems with the wrong shape.

## The common aspect ratios and where they are used

- 1:1 square: 1080 × 1080
- 4:5 portrait: 1080 × 1350
- 2:3 pin: 1000 × 1500
- 9:16 vertical: 1080 × 1920
- 4:3 classic: 1600 × 1200
- 16:9 widescreen: 1920 × 1080
- 1.91:1 link card: 1200 × 630
- 3:1 header: 1500 × 500

Eight shapes cover almost everything you will design. Drawn to scale, from the square to the slim header.

| Ratio | Shape | Typical size | Used for |
| --- | --- | --- | --- |
| 1:1 | Square | 1080×1080 | Instagram square, Facebook and LinkedIn posts, playlist covers |
| 4:5 | Portrait | 1080×1350 | Instagram, Threads, Facebook and X portrait posts |
| 3:4 | Portrait | 1080×1440 | How Instagram crops posts in the profile grid |
| 2:3 | Tall portrait | 1000×1500 | Pinterest pins |
| 9:16 | Vertical | 1080×1920 | Stories, Reels, TikTok, Shorts, WhatsApp status |
| 4:3 | Classic landscape | 1600×1200 | Older slides, Dribbble shots, Google Business posts at 1200×900 |
| 16:9 | Widescreen | 1920×1080 | YouTube thumbnails, slides, website heroes, X and Bluesky posts |
| 1.91:1 | Wide card | 1200×630 | Link previews and Open Graph images |
| 3:1 and 4:1 | Banner | 1500×500, 1584×396 | X headers, LinkedIn banners |

One ratio, many platforms. When two formats share a ratio, one design serves both by scaling.

The exact pixel sizes for every platform are in [social media image sizes](https://gradiently.design/guide/social-media-image-sizes). Notice how few shapes there are: if you can design well in 1:1, 4:5, 9:16 and 16:9, you can cover most of a brand's social presence.

## How to work out an aspect ratio

Take the width and height and divide both by the largest number that goes into each exactly, called the greatest common divisor. What is left is the ratio in its simplest form.

1. **Start with the size** Say 1080×1350, a portrait Instagram post.
2. **Find the greatest common divisor** The largest number that divides both 1080 and 1350 exactly is 270.
3. **Divide both sides** 1080 ÷ 270 = 4 and 1350 ÷ 270 = 5. The aspect ratio is 4:5.
4. **Or use a decimal** Divide width by height: 1080 ÷ 1350 = 0.8. Decimals are handy for awkward shapes such as 1200×630, which is about 1.91, hence 1.91:1.

If you'd rather not do it by hand, these few lines of JavaScript do the same thing in a browser console.

```js
const gcd = (a, b) => (b === 0 ? a : gcd(b, a % b));

function aspectRatio(width, height) {
  const d = gcd(width, height);
  return `${width / d}:${height / d}`;
}

// Height for a new width, keeping the same shape
const heightFor = (newWidth, w, h) => Math.round((newWidth * h) / w);

aspectRatio(1920, 1080); // "16:9"
aspectRatio(1080, 1350); // "4:5"
heightFor(1280, 16, 9);  // 720
```

Euclid's algorithm for the divisor, then simple scaling. Paste it into any browser console.

## Converting sizes without changing the shape

To scale an image and keep its aspect ratio, use one formula: **new height = new width × ratio height ÷ ratio width**. For a 16:9 frame 1280 pixels wide, that is 1280 × 9 ÷ 16 = 720. For a 4:5 frame 1600 pixels wide, it is 1600 × 5 ÷ 4 = 2000.

Working the other way is just as simple: new width = new height × ratio width ÷ ratio height. A 9:16 video that must be 1280 tall is 1280 × 9 ÷ 16 = 720 wide. If the answer comes out with a decimal, round to the nearest whole pixel; the difference is invisible.

## What happens when you change the aspect ratio

Scaling keeps the shape. Changing the ratio does not, and you have only three honest options: crop part of the image away, add space around it, or rearrange the design for the new shape. The fourth option, stretching, distorts every letter and circle, and people notice at once.

### Crop or stretch

- Fast, but the headline is often cut
- Stretching makes type look squashed
- Logos land in the wrong place
- Backgrounds lose their bright spot
- Every format looks slightly off

### Lay out again

- Words reflow to suit the shape
- Type keeps its true proportions
- Logo goes where each format expects it
- Background is rendered fresh for the frame
- Every format looks designed for its place

A 4:5 portrait post for a pottery studio announcing that spring classes are open

The design in 4:5 for the feed: stacked words, room above and below.

The same pottery studio announcement laid out in a 16:9 widescreen frame

The same design in 16:9 for a website hero: the words spread wider, the background redrawn for the frame.

This is what resizing in Gradiently does with Pro: pick the sizes you need and each copy is laid out again for its shape, while the Mark behind it renders fresh at every ratio rather than being cropped from one image. [One look, every size](https://gradiently.design/guide/one-look-every-size) walks through it.

## Which aspect ratio to choose for a post

When a platform accepts several shapes, pick the one that takes up the most room on a phone screen. On Instagram that is 4:5, which is taller than a square and survives the profile grid crop best; [Instagram post size](https://gradiently.design/guide/instagram-post-size) explains why. On Pinterest, a 2:3 pin is the standard; longer pins exist but can be cut short in the feed, as covered in [Pinterest pin size](https://gradiently.design/guide/pinterest-pin-size).

For anything watched on a television or laptop, 16:9 is the safe choice, which is why [YouTube thumbnails](https://gradiently.design/guide/youtube-thumbnail-size) and slides use it. For anything watched full screen on a phone, 9:16 is the only shape that fills it. When in doubt, design the vertical and the widescreen versions first: the square and portrait sit comfortably between them.

## Aspect ratio in CSS

On the web, the CSS `aspect-ratio` property keeps a box in shape at any width, which stops layouts jumping while images and videos load. It is supported in all current browsers; see [MDN's aspect-ratio reference](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio).

```css
.hero {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: linear-gradient(135deg, #1e1b4b 0%, #6d28d9 60%, #f472b6 100%);
}

.card-image {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover; /* crops to fill rather than stretching */
}
```

Write the ratio with a slash. Pair it with object-fit: cover on images so they crop instead of distorting.

Ratios also matter for print and video, with their own conventions. For video formats see [social video sizes](https://gradiently.design/guide/social-video-sizes), and for how pixel counts relate to physical size, [DPI vs PPI](https://gradiently.design/guide/dpi-vs-ppi).

## FAQ

### What is an aspect ratio?

It is the shape of an image, expressed as its width compared with its height, such as 16:9 or 4:5. Images with the same aspect ratio scale into each other without cropping.

### How do I calculate an aspect ratio?

Divide the width and height by their greatest common divisor. For 1920×1080 the divisor is 120, giving 16:9.

### What aspect ratio is 1080×1350?

4:5, the portrait shape used for Instagram, Threads, Facebook and X portrait posts.

### What is the difference between 16:9 and 9:16?

They are the same shape turned on its side. 16:9 is landscape, used for YouTube and slides; 9:16 is vertical, used for Stories, Reels and TikTok.

### How do I change an aspect ratio without stretching?

Crop the image, add space around it, or lay the design out again for the new shape. Rearranging gives the best result for designs with text.