Aspect Ratio Calculator

How to use Aspect Ratio Calculator

Three simple steps, with your content kept on your device.

Built for useful work

Fast, focused, and made to be clear on every screen.

How to calculate an aspect ratio

Enter a width and a height to see the ratio in lowest terms, or enter a ratio plus one known side to get the matching dimension. Both directions run instantly and locally in your browser.

Simplification divides both numbers by their greatest common divisor, so 1920 by 1080 reduces to 16:9 and 2560 by 1600 reduces to 16:10. Integer inputs reduce exactly; decimal inputs are reported to eight decimal places.

Scaling works the other way round: the known side is multiplied by the matching ratio number and divided by the other, which preserves the proportion precisely rather than approximately.

Common ratios and where they come from

The 16 9 aspect ratio is the modern default for video and most displays. It is what HD and 4K use — 1920 by 1080 and 3840 by 2160 both reduce to it — so it is the safe choice for anything destined for a screen or a video platform.

4:3 was the standard before widescreen and survives in presentation slides, older cameras, and many tablet screens. 3:2 is the classic still-photography ratio, inherited from 35mm film and still used by most mirrorless and DSLR sensors.

1:1 dominates social feeds because a square crops predictably in a grid, and 9:16 is the vertical inverse used by phone-first video. Ultrawide monitors typically use 21:9.

Scaling image dimensions without distortion

Distortion happens when width and height are changed by different factors, which stretches or squashes the content. Calculating the second dimension from the first is what prevents it.

This is the everyday use of an image dimension ratio calculation: you know the width a layout allows, and you need the height that keeps the picture proportional. Enter the ratio and the known width, and the answer is the height to use.

The same arithmetic covers the reverse case — a fixed-height header or a thumbnail row where the width has to follow. Rounding to whole pixels at the end is fine; rounding both sides independently before the calculation is what introduces drift.

Letterboxing, pillarboxing, and cropping

When source and destination ratios differ, something has to give. Fitting the whole image inside the frame leaves empty bands — horizontal bars for letterboxing, vertical ones for pillarboxing — while filling the frame instead crops content away at the edges.

Knowing both ratios tells you in advance how much will be lost. A 3:2 photograph placed in a 16:9 frame loses roughly an eighth of its height when filled, which is usually acceptable for landscapes and often disastrous for portraits.

That is why the ratio is worth checking before shooting or cropping rather than after. Framing with a little margin makes the same image usable in several destination ratios.

Ratios in CSS and responsive layouts

Modern CSS has an aspect-ratio property, so a container can hold a shape without a fixed height. Setting aspect-ratio to 16 / 9 lets the element scale with its width while keeping the proportion.

This matters for layout stability. Reserving the correct proportional space before an image or video loads prevents the content below from jumping, which is exactly what Cumulative Layout Shift measures.

The ratio you set in CSS should match the ratio of the asset you are serving. Calculating it here first means the reserved box and the delivered file agree, and nothing shifts or gets letterboxed unintentionally.

Related tools

Once you know the target dimensions, the Image Resizer applies them to an actual file, and the Image Cropper adjusts framing when a ratio change means losing part of the picture.

The Percentage Calculator handles the related question of proportional scaling by a factor rather than to a ratio, and the Number Base Converter is useful when dimensions arrive in an unexpected notation.

Everything runs locally in the browser, so a full calculate-crop-resize pass happens without uploading a single image.

Frequently asked questions