Aspect Ratio Calculator

What is the Aspect Ratio Calculator?#

The Aspect Ratio Calculator finds the ratio behind any width and height. Enter two pixel sizes and it shows the simplified ratio with its decimal value, a preview of the shape, and a code snippet ready to paste.

With the lock on, the shape stays fixed, so editing one size fills in the matching size for the other.

How to Use#

1. Enter a width and a height in pixels.
2. Copy the ratio or the code snippet.

Options#

• Lock ratio: holds the current shape while sizes change. Editing the width recalculates the height, and editing the height recalculates the width. Turn it off to change each size on its own; the ratio then follows the two sizes.
• Swap width and height: exchanges both sizes and flips the ratio left to right. Unavailable while either size is invalid.

Ratio Presets#

Presets are grouped by use: video, social, photo, and device. Each one pairs a ratio with a typical resolution. Choosing a preset fills in both sizes, sets the ratio, and turns the lock on.

The resolution is a representative value for that use. Its exact ratio can differ slightly from the labeled ratio, as with 2560×1080 against 21:9.

Code Snippets#

• CSS: aspect-ratio: 16 / 9; fits anywhere in a stylesheet, using the held ratio's numbers.
• Tailwind: 16:9 becomes aspect-video and 1:1 becomes aspect-square, while anything else uses the aspect-[21/9] form.

Use Cases#

• Reading the ratio off an image or video size before cropping or exporting.
• Producing a new resolution at the same ratio, such as a smaller render of a 16:9 frame.
• Pasting the ratio into CSS so a box holds its shape before the content loads.

Notes#

• Sizes are whole numbers. With the lock on, the other size rounds to the nearest integer, so it can sit slightly off the exact ratio.
• A size above 100000 counts as 100000.

FAQ#