How to use the Aspect Ratio Calculator
- Enter a ratio (or click a common one like 16:9 or 9:16).
- Type a width to get the matching height — or a height to get the width.
- To find the ratio of an existing image or screen, enter its size under Find the ratio of a size; click Use this ratio to resize with it.
- Copy the CSS (
aspect-ratioplus the padding-top fallback) and pick a standard size from the table.
What is an aspect ratio?
An aspect ratio is the proportional relationship between width and height, written as width:height. A 1920 × 1080 video and a 1280 × 720 video are different sizes but share the same 16:9 ratio, so one scales to the other without stretching or cropping. Keeping the ratio when resizing is what prevents distorted images and black bars.
Aspect ratio formulas
- New height = new width × ratio height ÷ ratio width — e.g. 1280 × 9 ÷ 16 = 720.
- New width = new height × ratio width ÷ ratio height — e.g. 1080 × 16 ÷ 9 = 1920.
- Simplify a size: divide both sides by their greatest common divisor (GCD). 1920 and 1080 share a GCD of 120, giving 16:9.
Some sizes don’t reduce neatly: 1366 × 768 (a common laptop resolution) simplifies to 683:384, which is approximately 16:9. The calculator shows the exact ratio and the nearest common ratio.
Common aspect ratios and where they’re used
| Ratio | Decimal | Typical use |
|---|---|---|
| 16:9 | 1.778 | HD/4K video, YouTube, monitors, presentations |
| 9:16 | 0.5625 | Stories, Reels, TikTok, YouTube Shorts |
| 4:3 | 1.333 | Older TVs and monitors, iPad, many compact cameras |
| 3:2 | 1.5 | 35 mm film, DSLR/mirrorless photos, Surface laptops |
| 1:1 | 1 | Square social posts, avatars, product thumbnails |
| 4:5 | 0.8 | Portrait feed posts on Instagram and Facebook |
| 21:9 | ≈ 2.33 | Ultrawide monitors, cinematic video |
| 1.91:1 | 1.91 | Open Graph / link preview images (1200 × 630) |
Aspect ratio in CSS
Modern browsers support the aspect-ratio property: aspect-ratio: 16 / 9; on an element with a width gives it the matching height — perfect for responsive video embeds, cards and image placeholders that prevent layout shift (good for Core Web Vitals CLS). The older technique is the padding-top hack: a wrapper with height: 0; padding-top: 56.25% (9 ÷ 16 × 100), because vertical padding percentages are relative to the element’s width. Both are generated above. For the image files themselves, use the Image Resizer; for link previews, the OG Image Generator creates 1200 × 630 images.
Tools that pair well with the Aspect Ratio Calculator
- Clamp Calculator — Enter a minimum and maximum size and the viewport range — get a zoom-friendly clamp() value with the maths explained, a live preview and a complete fluid type or space scale.
- PX to REM Converter — Convert between pixels, rem and em with your own root font size — or paste a whole stylesheet and convert every px value in one go.
- Date Difference Calculator — Count the days between two dates — including business days and a years/months/days breakdown — add or subtract time from a date, or run a live countdown.
- Time Zone Converter — Convert any time between cities and time zones, see the current time everywhere, and find a meeting slot that falls in everyone’s working hours.
Frequently asked questions
How do I calculate height from width and aspect ratio?
Is 1920×1080 16:9?
What aspect ratio is 1080×1350?
What is the padding-top value for 16:9?
Should I use aspect-ratio or the padding hack in CSS?
aspect-ratio; it is supported by all current browsers and needs no wrapper. Keep the padding hack only if you must support very old browsers such as Safari before 15.