Generators

Aspect Ratio Calculator

Simplify aspect ratios and get the CSS to reproduce them.

Input
TEXT input
Output
Result
Options

Optional: shows the matching height.

About this tool

Give this any two dimensions and it reduces them to the simplest ratio, then produces the CSS you need: a modern aspect-ratio declaration, the older padding-top percentage, and the height that pairs with any target width.

Reserving space for media with a known ratio is the main defence against layout shift, which is one of the Core Web Vitals. An image or embed without reserved space pushes content down when it loads.

How to use it

  1. Paste or upload your textDrop a file onto the input pane, use the file picker, or paste the text directly.
  2. Adjust the options if neededThe defaults suit most input; open Options to change the behaviour.
  3. CalculatePress Calculate, or use Ctrl+Enter (Cmd+Enter on macOS).
  4. Copy or downloadCopy the result, or download it as a .txt file.

Worked examples

Each example below is executed against this tool by the test suite, so what you see is what the tool actually produces.

Full HD dimensions

Input

1920x1080

Output

Dimensions        1920 × 1080
Simplified ratio  16:9
Decimal ratio     1.7778
CSS               aspect-ratio: 16 / 9;
Padding hack      padding-top: 56.25%;
Orientation       landscape

The familiar 56.25% is simply 9 divided by 16.

What to watch for

The details that decide whether a conversion is correct, and where information can be lost without any error being raised.

Simplification uses the greatest common divisor
1920 × 1080 reduces to 16:9 because both divide by 120. That is why 1280 × 720 and 3840 × 2160 are all the same ratio, recognising this makes it obvious when a supposedly odd size is actually standard.
aspect-ratio versus the padding hack
The CSS aspect-ratio property is supported in every current browser and is the right choice. The padding-top percentage, height divided by width, is the old technique, and it works because percentage padding resolves against the container width. Keep it only for genuinely old browser targets.
Common ratios worth recognising
16:9 is video and most screens, 4:3 older displays and many camera sensors, 3:2 mirrorless photography, 1:1 square social images, 21:9 ultrawide, and 9:16 vertical video. If your calculation produces something close to but not exactly one of these, the source dimensions are probably slightly off.

Limitations

  • Simplification rounds fractional dimensions to whole numbers first.
  • Processing happens in your browser, so very large inputs are bounded by available memory. Files above roughly 10 MB are handled but will feel slower, and multi-hundred-megabyte files are better suited to a command-line tool.

Questions

Should I use aspect-ratio or the padding hack?
Use the aspect-ratio property. It is supported everywhere current and far clearer. The padding technique is only for very old browser support.
How does this help Core Web Vitals?
Declaring the ratio lets the browser reserve space before an image or embed loads, which prevents the layout shift that hurts your CLS score.
What input formats are accepted?
1920x1080, 16:9, 1920 1080 and 1920/1080 all work.

Related tools