Smallest whole-pixel size 1 × 1.
In CSS: aspect-ratio: 1 / 1. Rotated it becomes 1:1.
Where 1:1 is used
Instagram grid posts, profile pictures, album artwork, app icons.
The square was Instagram's only option until 2015 and still dominates profile imagery because a circle mask crops a square predictably.
Rendered live with aspect-ratio: 1 / 1.
1:1 resolutions
Every size below is exactly 1:1 — no rounding. Sizes marked as a standard are named display resolutions.
| Resolution | Width | Height | Megapixels | Standard |
|---|---|---|---|---|
| 320 × 320 | 320 | 320 | 0.1 | — |
| 480 × 480 | 480 | 480 | 0.23 | — |
| 640 × 640 | 640 | 640 | 0.41 | — |
| 720 × 720 | 720 | 720 | 0.52 | — |
| 800 × 800 | 800 | 800 | 0.64 | — |
| 960 × 960 | 960 | 960 | 0.92 | — |
| 1080 × 1080 | 1080 | 1080 | 1.17 | — |
| 1200 × 1200 | 1200 | 1200 | 1.44 | — |
| 1280 × 1280 | 1280 | 1280 | 1.64 | — |
| 1440 × 1440 | 1440 | 1440 | 2.07 | — |
| 1600 × 1600 | 1600 | 1600 | 2.56 | — |
| 1920 × 1920 | 1920 | 1920 | 3.69 | — |
| 2048 × 2048 | 2048 | 2048 | 4.19 | — |
| 2560 × 2560 | 2560 | 2560 | 6.55 | — |
| 3200 × 3200 | 3200 | 3200 | 10.24 | — |
| 3840 × 3840 | 3840 | 3840 | 14.75 | — |
| 5120 × 5120 | 5120 | 5120 | 26.21 | — |
| 7680 × 7680 | 7680 | 7680 | 58.98 | — |
Using 1:1 in CSS
/* Modern — one line */
.box { aspect-ratio: 1 / 1; }
/* With a fixed width */
.box { width: 100%; max-width: 800px; aspect-ratio: 1 / 1; }
/* Legacy padding-top hack, if you still need it */
.box-legacy { position: relative; }
.box-legacy::before { content: ""; display: block; padding-top: 100%; }
.box-legacy > * { position: absolute; inset: 0; }Questions about 1:1
What resolution is 1:1?
1:1 is a ratio, not a fixed resolution — any size where width ÷ height equals 1 qualifies. The smallest whole-pixel pair is 1 × 1, and common ones include 640 × 640, 720 × 720, 800 × 800, 960 × 960.
What is 1:1 used for?
Instagram grid posts, profile pictures, album artwork, app icons.
How do I set 1:1 in CSS?
Use the aspect-ratio property: aspect-ratio: 1 / 1;. The element then keeps that shape at any width. It is supported in every current browser.
What is 1:1 the other way round?
Rotated to portrait it becomes 1:1 — the same shape, turned 90 degrees.
How do I calculate a 1:1 height from a width?
Multiply the width by 1. For example 1080 × 1 = 1080. The calculator does it both directions.