Aspect Ratio Calculator
What it does
The calculator keeps a width and height locked to a ratio. Pick a preset (16:9, 4:5, 1:1, 9:16, A4) or type your own, enter one side, and the other follows. It also reduces any pair of dimensions to its simplest ratio, so typing 1920 by 1080 returns 16:9 straight away.
How to calculate aspect ratio from width and height
Divide both numbers by their greatest common divisor. For 1920 × 1080 the largest number that divides both is 120, and 1920 ÷ 120 = 16, 1080 ÷ 120 = 9, so the ratio is 16:9.
To find a missing side, keep the proportion and solve for the unknown:
- New height = new width × original height ÷ original width
- New width = new height × original width ÷ original height
A photo at 3000 × 2000 that has to be 1200 pixels wide needs a height of 1200 × 2000 ÷ 3000 = 800. A 16:9 slot that is 1280 wide needs 1280 × 9 ÷ 16 = 720.
Some screens never reduce to the ratio they are sold as. A 1366 × 768 laptop display is marketed as 16:9, but the exact ratio is 683:384, and a 2560 × 1080 “21:9” ultrawide is 64:27. The calculator shows the exact figure. If you are matching a design to one of these screens, use the real pixel sizes and treat the marketing ratio as a label.
Common aspect ratios and pixel sizes
| Ratio | Where it’s used | Common pixel sizes |
|---|---|---|
| 16:9 | Video, YouTube, TVs, most monitors | 1280 × 720, 1920 × 1080, 2560 × 1440, 3840 × 2160 |
| 9:16 | Stories, Reels, TikTok, YouTube Shorts | 1080 × 1920 |
| 4:5 | Portrait social feed posts | 1080 × 1350 |
| 1:1 | Square social posts, avatars, product thumbnails | 1080 × 1080, 800 × 800 |
| 4:3 | Older iPads and monitors, many compact cameras | 1024 × 768, 1600 × 1200 |
| 3:2 | Most DSLR and mirrorless camera photos | 1500 × 1000, 6000 × 4000 |
| 1.91:1 | Open Graph link previews (Facebook, LinkedIn) | 1200 × 630 |
| 21:9 (nominal) | Ultrawide monitors, cinema crops | 2560 × 1080, 3440 × 1440 |
| 1:1.414 | A-series paper (A4, A3) | A4 at 300 dpi: 2480 × 3508 |
A ratio says nothing about resolution. A square is 1:1 at 100 × 100 and at 4000 × 4000. Pick the ratio first, then the pixel size the platform recommends for sharp display, which is usually around 1080 pixels on the short side for social images.
Common situations
One source photograph has to become a square post, a Story, and a YouTube thumbnail. Each needs a different shape, and getting the size a few pixels wrong wastes resolution or adds a border. The calculator turns “what height is 1080 wide at 9:16?” into one reading (1920).
A CMS template asks for a 16:9 hero image that sits 800 pixels wide on tablets. Type 800 into the width and the height comes back as 450.
A photographer’s delivery arrives in a mix of 4:3, 3:2 and 16:9. Running each set of dimensions through the calculator sorts them by shape before anyone starts cropping.
A print leaflet at A4 also needs a digital preview. A4 at 210 × 297mm is 1:1.414 (one to the square root of two), which is the proportion to keep for the screen version.
What you need to know
CSS handles proportions natively with the aspect-ratio property. aspect-ratio: 16 / 9 on any block element makes the browser size it correctly, with no padding tricks or absolutely positioned wrappers. Every major browser released since 2021 supports it, so the old padding-bottom: 56.25% technique for responsive video belongs in legacy code only.
Each platform settles on the shapes its viewers hold their devices in. Phones favour vertical (9:16), desktop video is horizontal (16:9), and social feeds sit in between (4:5 and 1:1). Open Graph previews use 1200 × 630, slightly wider than 16:9, which would be 1200 × 675. You can check how a page’s preview image will crop with our Open Graph debugger.
Frequently asked questions
What is an aspect ratio?
The proportion between an image’s width and its height, written as width:height. 16:9 means 16 units wide for every 9 units tall. 1:1 is square, 9:16 is vertical, and 4:5 is a tall portrait.
How do I work out the height for a given width?
Multiply the width by the ratio’s second number and divide by its first. At 16:9, a width of 1600 gives 1600 × 9 ÷ 16 = 900. Enter the width above with the ratio set and the calculator does this for you.
What is 1920 × 1080 as a ratio?
16:9. Both numbers divide by 120, which leaves 16 and 9. The same ratio covers 1280 × 720, 2560 × 1440 and 3840 × 2160 (4K UHD).
What’s the difference between resolution and aspect ratio?
Resolution is the pixel count (1920 × 1080). Aspect ratio is the shape (16:9). 1280 × 720 and 3840 × 2160 share the same shape but hold very different amounts of detail.
Why does my image stretch when I change one dimension?
Changing one side without the other distorts the image. Lock the ratio here, or in CSS use aspect-ratio together with object-fit: cover so the image fills its box without distorting.
What aspect ratio should an Open Graph image be?
1.91:1, which in practice means 1200 × 630. Facebook, LinkedIn and most messaging apps crop to roughly that shape for link previews, so keep important text away from the edges.
Is A4 a standard aspect ratio?
A-series paper uses 1:√2, roughly 1:1.414, so halving a sheet keeps the same shape. That is why an A4 layout scales cleanly to A3 or A5 without cropping.
Common problems
Problem: The simplified ratio shows large numbers like 683:384.
The dimensions do not reduce to a neat pair. Sometimes that is the screen itself (see the 1366 × 768 example above). Other times an image has been resized by a pixel somewhere, turning 1920 × 1080 into 1921 × 1080. Check the source dimensions before cropping to fit.
Problem: A platform’s recommended size doesn’t match the preset.
1080 × 1350 is 4:5, the same shape as the 4:5 preset at a particular resolution. If the simplified ratio matches, the image will fit; the pixel size only affects sharpness.
Problem: A responsive image or video changes shape as the window resizes.
The element has no fixed proportion. Set aspect-ratio: 16 / 9 (or your ratio) on it with width: 100%. For an iframe embed, apply the property to the iframe itself; without it the iframe keeps a fixed height while its width changes.
Problem: The page jumps as images load.
The browser doesn’t know each image’s shape until it arrives. Add width and height attributes to every <img> tag. Any numbers in the right ratio will do, because CSS still sets the displayed size, and the browser reserves the correct space in advance.
Quick guides
Plain CSS: aspect-ratio: 16 / 9; on the element, combined with width: 100% for a fluid container.
Tailwind CSS: aspect-square gives 1:1 and aspect-video gives 16:9. Any other ratio uses the bracket form, such as aspect-[4/5].
HTML images: set width and height attributes on <img> to match the image’s ratio, then let CSS control the displayed size.
Tips
- Custom ratios such as 5:4 or 11:8.5 (US Letter) work as well as the presets.
- When a crop has to work on several platforms, frame the subject for the tightest shape (usually 9:16 or 1:1) and widen from there.
- For video, 16:9 at 1920 × 1080 is still the safest default, and 3840 × 2160 is the same shape at four times the pixels.
Related tools in this suite
Both of these sit in the Design Suite beside the calculator. The Image Resizer is the next step once you know the target size, and the Image Cropper offers the same preset ratios as crop guides, so you can see the result before you commit.
Getting image sizes right across a site
Picking one image size is easy. Keeping hundreds of them consistent across templates, breakpoints and social previews is a design-system decision. If your site’s images crop badly or shift as pages load, our UI and UX design work sets the ratios, sizes and rules once so every new page follows them.