Aspect Ratio Calculator
Enter the original dimensions, then change the target width or height to keep the same proportion. The result is a size calculation and CSS snippet.
Runs locally in your browser ·
16:9
Enter the original dimensions, then change the target width or height to keep the same proportion. The result is a size calculation and CSS snippet.
Runs locally in your browserTwo pixel dimensions go in and three things come out: the ratio in lowest terms, a second size with the same proportion, and a CSS declaration for the element that has to keep its shape. It is arithmetic on numbers — no image is opened, resized or uploaded.
Every field recalculates as you type. The source width and height set the ratio, and whichever target field you edit recalculates the other side, so the proportion survives half-typed values and intermediate edits.
The reduced ratio divides the source dimensions by their greatest common divisor: 1920 × 1080 becomes 16:9, while 1366 × 768 becomes 683:384 because those two numbers share no smaller divisor. The proportional size is the target pair after rounding to whole pixels. The decimal ratio is width ÷ height with six decimals, so 16:9 reads 1.777778. The padding fallback is height ÷ width as a percentage — 56.2500 % for 16:9 — the number the percentage-padding technique needs.
Copy CSS writes aspect-ratio: 16 / 9; to state the shape, width: 100%; so the element fills its column, and a commented padding-top line as the fallback. Keep the padding line when the same stylesheet has to hold up in an engine that ignores the aspect-ratio property; delete the comment block when it does not. Because the snippet uses the reduced pair, a ratio such as 683:384 appears exactly as it was calculated instead of being rounded to a familiar name.
The pair only ever uses integers: a decimal width or height is rounded to the nearest whole number before the greatest common divisor is taken, while the decimal ratio and the padding percentage keep the values you typed. Presets are reduced the same way, which is why the 21:9 entry is reported as 7:3 — the same proportion in lowest terms. Both source values must be greater than zero; if one of them is empty, zero or negative, the status line says so and the last valid result stays on screen.
Because every ratio is printed in lowest terms: 21 and 9 both divide by 3, so 21:9 reduces to 7:3. The proportion is unchanged, and aspect-ratio: 7 / 3 computes the same box as aspect-ratio: 21 / 9.
Either one. Editing the width recalculates the height and editing the height recalculates the width, so choose the side your layout actually constrains — a fixed column width, or a fixed height such as 600 px.
It is printed as a commented line, so keeping it costs nothing. aspect-ratio states the shape in one declaration; the percentage padding is the older technique that works in engines which ignore that property. Remove the comment block only when every target browser supports aspect-ratio.
Yes. The reduced pair is calculated from the rounded integers — 1920.5 × 1080.25 is reported as 1921:1080 — while the decimal ratio (1.777829) and the padding percentage use the unrounded numbers.
No. It only computes numbers and CSS, and the file is never opened. Use the image resizer when the pixels themselves have to change, and this page for the container that displays them.