PickCode- Home
- Free tools
- Aspect ratio calculator
Aspect ratio calculator
Enter a width and height to get the simplified ratio. Change the new width or height to resize without distortion, then copy the CSS or Tailwind class.
16:91.7778 wide for every 1 tall
aspect-ratio: 16 / 9;aspect-videopadding-top: 56.25%;Copy the whole media block
PickCode copies any card, hero or video block from a live page as Tailwind, React, Blade or HTML + CSS. 5 free elements a day.
How the aspect ratio is calculated
Divide the width and height by their greatest common divisor. For 1920 × 1080 that divisor is 120, which gives 16:9. To resize, keep the same proportion: new height = new width × 9 / 16, so 1280 wide is 720 tall.
.video {
width: 100%;
aspect-ratio: 16 / 9;
}| Ratio | Common sizes | Typical use | Tailwind |
|---|---|---|---|
| 16:9 | 1920 × 1080, 1280 × 720 | Video, slides, most monitors | aspect-video |
| 4:3 | 1024 × 768, 800 × 600 | Older screens, tablets, presentations | aspect-[4/3] |
| 3:2 | 1500 × 1000, 1200 × 800 | Photos, laptops | aspect-[3/2] |
| 1:1 | 1080 × 1080 | Avatars, social posts | aspect-square |
| 21:9 | 2560 × 1080, 3440 × 1440 | Ultrawide monitors, film | aspect-[21/9] |
| 9:16 | 1080 × 1920 | Stories, Reels, Shorts | aspect-[9/16] |
What to know
- Near sizes get a label
- 1366 × 768 simplifies to 683:384, which nobody says out loud. The calculator also shows the common ratio it is sold as, here 16:9.
- CSS instead of the old hack
aspect-ratioreplaces thepadding-top: 56.25%trick. The padding value is still shown for old code you may need to read or match.- Tailwind classes
aspect-videoandaspect-squareare built in. Other ratios use an arbitrary value likeaspect-[4/3], which works in v3 and v4.- Stays on your machine
- Everything is calculated in this tab. Nothing is uploaded.
Questions
How do I calculate an aspect ratio?
Divide width and height by their greatest common divisor. 1920 and 1080 share 120, which leaves 16 and 9.
How do I keep the ratio when resizing?
Multiply the new width by the original height, then divide by the original width. A 1920 × 1080 image at 1280 wide is 1280 × 1080 / 1920 = 720 tall.
What is 16:9 in pixels?
Any size with that proportion: 1280 × 720, 1920 × 1080, 2560 × 1440 and 3840 × 2160 are the common ones.
How do I set an aspect ratio in CSS?
Set one dimension and add aspect-ratio: 16 / 9. The browser works out the other dimension. It treats the ratio as a preference, so tall content can still make the box taller.
What is the Tailwind class for 16:9?
aspect-video. For a square use aspect-square, and for anything else an arbitrary value such as aspect-[4/3].