1:1 aspect ratio
1:1 is the square, with a decimal value of exactly 1. It is the default for avatars, icons and grid layouts, and the most reusable shape in an asset library.
At a glance
- Ratio
- 1:1
- Decimal value
- 1 (width divided by height)
- CSS aspect-ratio
- aspect-ratio: 1 / 1;
- Common pixel dimensions
- 512 x 512, 1024 x 1024, 1080 x 1080, 2048 x 2048
- Suits
- Avatars, icons, product shots, grid layouts and social feed posts
- Struggles with
- Video, landscape scenery and anything that has to fill a screen
In detail
The square has two separate ancestries. In photography it comes from medium format cameras that exposed a square negative, which freed the photographer from deciding orientation at the moment of the shot. On the web it comes from social feeds, where a uniform square made an arbitrary mix of portrait and landscape uploads into a tidy scrolling column.
Its practical advantage is symmetry under cropping. A square crops out of the centre of any landscape or portrait image without a decision about which edge to favour, and it expands into either orientation by adding padding rather than by removing content. That makes it the natural base shape for an asset library that has to serve several ratios.
It is also the only shape where orientation stops being a property. An avatar, an app icon and a favicon are all square precisely because they get placed into layouts that have no idea which way up the original was, and because a circle mask, which is what most interfaces actually apply, inscribes cleanly in a square and awkwardly in anything else.
The cost is wasted area whenever the subject is not square. A landscape scene squeezed into a square either loses its sides or floats in empty space, and a square hero image on a wide screen leaves most of the viewport unused. Square is a container shape, not a composition shape.
Examples
.tiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
}
.tiles img {
aspect-ratio: 1 / 1;
object-fit: cover;
width: 100%;
}.avatar {
aspect-ratio: 1 / 1;
border-radius: 50%;
object-fit: cover;
}The mask removes the corners, so keep the subject inside the inscribed circle.
Things that catch people out
- A circular mask on a square image removes about 21 percent of the area at the corners. Compose for the circle, not for the square.
- Centre cropping a landscape photograph to a square removes the context that made it a landscape photograph.
- Square is the safe default and rarely the best composition. Use it where the container demands it, not everywhere.
Try it: Aspect Ratio Calculator
Enter a width and a height, or a ratio and one dimension, and it solves the missing one, simplifies the ratio, counts the megapixels and gives you a copyable CSS value.
Aspect Ratio Calculator
LOCAL · Browser-OnlyCalculate and convert aspect ratios for images, videos, and screens
1920 x 1080px · 16:9 · 1.7778:1
Common Aspect Ratios Reference
| Ratio | Decimal | Common Use |
|---|---|---|
| 16:9 | 1.778 | Widescreen TV, YouTube, monitors |
| 4:3 | 1.333 | Classic TV, iPad, presentations |
| 1:1 | 1.000 | Instagram square, profile pictures |
| 21:9 | 2.333 | Ultrawide monitors, cinema |
| 9:16 | 0.563 | Phone vertical, TikTok, Reels |
| 3:2 | 1.500 | 35mm photography, MacBook |
| 2:3 | 0.667 | Portrait photography, posters |
| 5:4 | 1.250 | Large format photography, older monitors |
| 32:9 | 3.556 | Super ultrawide monitors |
| 2.39:1 | 2.390 | Anamorphic cinema, widescreen films |
Related Image and canvas sizes
All image and canvas sizes →4:3 aspect ratio
The 1.333 ratio that ran television and computer monitors for decades, where it still appears today, and how it compares to the widescreen shapes.
5:4 aspect ratio
The 1.25 ratio behind 1280 by 1024 monitors and 8 by 10 inch prints, why it caused distorted desktops for years, and where it still applies.
What is an aspect ratio?
Aspect ratio is width divided by height, and it says nothing about resolution or file size. How to simplify one, read it as a decimal, and use it correctly.
21:9 aspect ratio
The 21:9 marketing label at 2.3333, the 43:18 and 64:27 shapes that real ultrawide panels actually use, and how to design for the gap between them.
9:16 aspect ratio
The vertical video ratio at 0.5625, its exact inverse relationship with widescreen, and why modern phone screens are taller than it.
3:2 aspect ratio
The 1.5 ratio inherited from the 35mm film frame, the sensors and laptop screens that still use it, and how it sits between 4:3 and 16:9.
Tools for this
- Aspect Ratio Calculator Free online aspect ratio calculator - calculate and convert aspect ratios for images, videos, and screens
- Image Cropper Free online image cropper - crop images with preset aspect ratios and free-form selection