What is Aspect Ratio Calculator?

Aspect Ratio Calculator finds the aspect ratio of a width and height, or calculates the matching dimension for a chosen ratio. It is useful for checking the proportions of images and videos, resizing thumbnails and social media images, and turning a ratio into CSS or Tailwind code. Results update as you type, and the ratio is shown both as a simplified label and as a decimal value.

How to Use

1. Enter the width and height.
2. Turn on “Lock ratio” when you want to change one dimension while keeping the current ratio.
3. Choose a preset ratio, or select “Custom” to enter your own.
4. Copy the CSS or Tailwind code if you need it.

Code

Switch between the CSS aspect-ratio value and the Tailwind class, then copy the code you need.

Main Settings

Lock Ratio

When enabled, changing one dimension calculates the other from the current ratio. When disabled, the ratio is calculated from the width and height. The option is off by default.

Ratio Presets

Choose a preset for a common ratio. Selecting a preset applies the ratio using the larger of the current dimensions. Choosing a portrait preset for a landscape size, for example, keeps the long side and swaps the orientation.

Custom Ratio

For a ratio that is not in the presets, enter the width and height terms as integers. For example, 16 and 9 are treated as 16:9. Changing a term updates the dimensions using the larger of the current dimensions.

Swap Dimensions

Swaps the width and height. When the ratio is locked, the direction of the ratio is swapped as well.

Use Cases

• Checking whether an image or video is 16:9, 4:3, or another ratio
• Finding a width or height that keeps the ratio for a social media image or thumbnail
• Converting a design ratio into a CSS or Tailwind value
• Checking the size of a vertical version of a video

Things to Keep in Mind

• Dimensions are handled as integers from 1 to 100000
• When the ratio is locked, changing a dimension rounds the result to an integer, so the ratio can shift slightly