locolory
The Locolory toolkit / Aspect Ratio Calculator

Aspect Ratio Calculator
Every pixel in proportion.

Your canvas, calculated. Find an aspect ratio, resize a resolution,
and make room for your next idea.

An Aspect Ratio & Resolution Calculator is a browser-based utility that calculates proportional dimensions, simplifies width-to-height ratios, and generates responsive CSS values.

  • Core logic: divide width and height by their greatest common divisor, or solve the missing dimension from the selected width-to-height ratio.

No software download, login, or server upload required. Computations execute locally on device.

Aspect & resolution●   Live preview
px
px
Landscape · 2.07 MP

A starting point for every format

Custom ratio

PROPORTION PREVIEW · SCALED TO FIT
16:9
1920 × 1080
Drag a corner to resize · Arrow keys for precision
aspect-ratio: 16 / 9;
1920x1080
1920 × 1080 px
✳   Free to use. No upload needed.Calculated in your browser · 1–16,384 px

A little perspective.

THE GUIDE TO GETTING IT RIGHT

How Aspect Ratio Works

An aspect ratio describes the relationship between width and height. It tells you the shape of a frame, independently of its size. A 1920 × 1080 canvas and a 1280 × 720 canvas both share a 16:9 ratio, even though their pixel counts differ.

To simplify a ratio, divide both dimensions by their greatest common divisor. For 1920 and 1080, that number is 120. The result is sixteen units wide for every nine units tall. A square always reduces to 1:1; a portrait frame has more height than width.

Enter either dimension here with the ratio locked to calculate a proportional size. Unlock it to explore a new shape. The preview scales to fit your workspace, so its on-screen size is not the exported resolution. Copy the calculated values into your design or development tool.

Standard dimension cheat sheet

Example resolutions, not platform upload limits.
Format Ratio Example pixels
4K UHD 16:9 3840 × 2160
2K QHD / 1440p 16:9 2560 × 1440
Full HD 16:9 1920 × 1080
Ultrawide 21:9 3440 × 1440
Cinematic 4K DCI 1.90:1 4096 × 2160

Resolution describes pixel quantity; ratio describes shape. Changing one does not automatically change the other. The cinematic preset uses an exact 21:9 shape, which simplifies to 7:3. Use the ultrawide 21:9 calculator preset for a wide starting point, or enter 3840x2160 to check its 4K resolution aspect ratio. Individual displays and films can use different proportions.

Good questions. Clear answers.

How do I calculate an aspect ratio?

Divide the width and height by their greatest common divisor. For 1920 × 1080, the divisor is 120, giving 16:9. Width always comes first.

Does resizing change image quality?

This calculator computes dimensions; it does not edit image files. Enlarging a raster image can soften detail. Use an original source with enough pixels for the intended display.

Why does my locked ratio sometimes round?

Pixel dimensions must be whole numbers. Your entered dimension is preserved and the calculated dimension is rounded to the nearest pixel (minimum 1 px). While locked, the selected ratio and CSS keep your intended proportions; a note identifies any difference in the actual pixel dimensions. Sizes exceeding 16,384 px are rejected with guidance.

Which ratio should I choose?

Start with 16:9 for landscape video, 9:16 for vertical compositions, 1:1 for square layouts, or 21:9 for an ultrawide composition. Confirm the destination’s current requirements before exporting.

What is the 4K aspect ratio in pixels?

Standard 4K UHD is 3840 × 2160 pixels at 16:9. Cinematic DCI 4K is 4096 × 2160 pixels, approximately 1.90:1, so it is slightly wider than UHD.

How do I write an aspect ratio in CSS?

Use aspect-ratio: 16 / 9; on the element. For older-browser fallback support, place content in a wrapper with proportional padding, such as 56.25% top padding for 16:9, and absolutely position the content inside it.

How do I use the CSS output?

Apply the copied aspect-ratio declaration to a container with a defined width and automatic height. It reserves proportional space in a responsive layout. For images inside it, object-fit: cover fills the frame by cropping, while contain preserves the entire image with possible empty space.