What resolution is 16:9 at a given width?

Multiply width by 9/16: 1280→720, 1920→1080, 2560→1440, 3840→2160. The calculator solves it for any width or height and lists the standard sizes alongside.

How do I keep an element's aspect ratio in CSS?

The modern way is one line: aspect-ratio: 16 / 9. The legacy pattern gives a container padding-top of 56.25% and absolutely positions the content inside. The calculator emits both, matched to your ratio.

Why do monitors advertise 16:9 when the pixels say otherwise?

Panels like 1366×768 and 1360×768 approximate 16:9 within a percent — close enough for marketing and for full-screen video. The calculator shows the exact ratio and the nearest named one so the discrepancy is visible instead of confusing.

What aspect ratios do social platforms want?

Feed video leans 1:1 or 4:5, stories and shorts are 9:16, landscape uploads 16:9, and cinematic footage 21:9 or 2.39:1. Use the missing-dimension mode with the preset ratios to get exact pixel targets.

How does fit-in-box mode round?

It scales the ratio to the largest rectangle inside the container, then rounds both sides to whole pixels — so 16:9 in a 1000×1000 box is 1000×563. A half-pixel of ratio drift from rounding is normal and invisible.

Aspect Ratio Calculator

Simplify a size into its ratio, solve a missing width or height, or fit a ratio into a container — with CSS aspect-ratio output included.

The Aspect Ratio Calculator runs entirely in your browser. Dimensions are processed on your device and never uploaded.

Open the CSS clamp() Calculator

About Aspect Ratio Calculator

Aspect Ratio Calculator works in all three directions the problem arrives in. Give it a width and height and it simplifies the ratio by greatest common divisor — and, crucially, recognises near-misses: 1366×768 reduces to the useless 683:384, but the calculator also reports it as effectively 16:9, which is the answer you actually wanted. Give it a ratio and one dimension and it solves the other, rounded to whole pixels. Give it a ratio and a container and it returns the largest fit inside. Whatever the direction, you get the standard sizes at that ratio (1280×720 through 3840×2160 for 16:9) and ready-to-copy CSS: the modern aspect-ratio property plus the padding-top percentage for the legacy responsive-embed pattern.

Features

Dimensions → simplified exact ratio plus nearest common ratio
Ratio + one dimension → the other, in whole pixels
Ratio + container → largest fit inside the box
Common ratio presets from 16:9 to 2.39:1 anamorphic
Standard sizes list at the active ratio, even heights guaranteed
CSS aspect-ratio property and padding-hack percentage
Accepts 16:9, 16/9, 16x9 or decimal 1.78 input
Everything computed on your device

How to use the Aspect Ratio Calculator

Pick the direction: size → ratio, missing dimension, or fit-in-box
Enter what you know
Read the result and the standard sizes at that ratio
Copy the CSS if it is going into a layout

Example

Input

16:9, width 1000

Output

Height 563 px · CSS: aspect-ratio: 16 / 9; · padding hack 56.25%

The 56.25% figure is 9÷16 — the classic responsive-video number.

Common errors & troubleshooting

1366×768 simplifies to 683:384 instead of 16:9. — 683:384 is the exact answer — that resolution is genuinely not 16:9. The “effectively 16:9” line gives the practical answer; both are shown because both are true.
The solved dimension is odd and a video encoder rejects it. — H.264 and friends require even dimensions. Use the standard-sizes list, which rounds heights to even numbers, or nudge the input by a pixel.
A 4:3 video in a 16:9 player shows black bars. — That is correct behaviour — fitting 4:3 into 16:9 leaves pillarbox bars. Use the fit-in-box mode to see exactly how large the inner rectangle can be; removing bars means cropping content.
The padding hack renders a zero-height box. — padding-top percentages resolve against the parent's width, so the parent must have a width. Modern layouts should prefer the aspect-ratio property and keep the hack for legacy support only.

Frequently asked questions

What resolution is 16:9 at a given width?: Multiply width by 9/16: 1280→720, 1920→1080, 2560→1440, 3840→2160. The calculator solves it for any width or height and lists the standard sizes alongside.
How do I keep an element's aspect ratio in CSS?: The modern way is one line: aspect-ratio: 16 / 9. The legacy pattern gives a container padding-top of 56.25% and absolutely positions the content inside. The calculator emits both, matched to your ratio.
Why do monitors advertise 16:9 when the pixels say otherwise?: Panels like 1366×768 and 1360×768 approximate 16:9 within a percent — close enough for marketing and for full-screen video. The calculator shows the exact ratio and the nearest named one so the discrepancy is visible instead of confusing.
What aspect ratios do social platforms want?: Feed video leans 1:1 or 4:5, stories and shorts are 9:16, landscape uploads 16:9, and cinematic footage 21:9 or 2.39:1. Use the missing-dimension mode with the preset ratios to get exact pixel targets.
How does fit-in-box mode round?: It scales the ratio to the largest rectangle inside the container, then rounds both sides to whole pixels — so 16:9 in a 1000×1000 box is 1000×563. A half-pixel of ratio drift from rounding is normal and invisible.

Related tools

CSS Clamp Calculator — Calculate a fluid CSS clamp() value from min and max sizes and viewport widths.
CSS Grid Generator — Build CSS grid layouts visually and copy grid-template-columns, rows and gap.
CSS Border Radius Generator — Create simple or per-corner CSS border-radius, including blob shapes, with a live preview.
Open Graph Generator — Generate Open Graph & Twitter meta tags with a live social-card preview.
Video Resizer — Resize video for Reels, YouTube, square and more with letterboxing, in your browser.
Image Cropper — Crop an image to any area or fixed aspect ratio and download it, in your browser.