Aspect ratio calculator
Find a missing dimension from a ratio, plus the CSS aspect-ratio value.
FreeRuns in your browserNo signupUpdated 2026-10-29
Find a ratio from two dimensions
16:9 (1.778:1)
Results are rounded to whole pixels in the table; exact values are shown above it.
Height
720px
1280 × 720
Simplest ratio
16:9
1.7778:1
Padding hack
56.25%
padding-top for the old technique
Preview
.media {
aspect-ratio: 16 / 9;
width: 100%;
}
/* Fallback for very old browsers */
.media-fallback {
position: relative;
padding-top: 56.250%;
}Heights at common widths
| Width | Height |
|---|---|
| 320px | 180px |
| 640px | 360px |
| 768px | 432px |
| 1024px | 576px |
| 1280px | 720px |
| 1920px | 1080px |
About this tool
How it works and how to read the result.
Need this done for you?
Website design & development
Company websites designed and built to win trust and enquiries.
See the serviceWhat it does
This aspect ratio calculator finds the missing side of a rectangle when you know the ratio and one dimension. It also works backwards: enter a width and height and it reduces them to the simplest ratio. Presets cover video, photos, square posts, vertical video, Open Graph images and A4 paper. The output includes the CSS aspect-ratio rule, the older padding-top percentage for legacy layouts, and a table of heights at common widths.
How to use it
- Pick a preset, or type the two numbers of the ratio, such as 16 and 9.
- Choose whether you know the width or the height, and enter it.
- Read the missing dimension at the top of the results.
- To find the ratio of an existing image, enter its width and height in the second box.
- Copy the CSS.
How to read the result
With a 16:9 ratio and a width of 1280px, the height is 1280 × 9 ÷ 16, which is 720px. The simplest ratio stays 16:9, the decimal form is 1.7778:1, and the padding value is 56.25%: the height as a percentage of the width.
Now take an Open Graph image at 1200 × 630. Entered in the second box, it reduces to 40:21, about 1.905:1, which is why the format is often described as 1.91:1. If you need a version for a card 600px wide, set the ratio to 1200 and 630 and enter 600 as the width: the height is 315px.
In CSS, aspect-ratio: 16 / 9 on an element with width: 100% reserves the right height before the image or video loads, so the page does not jump. That directly lowers Cumulative Layout Shift. The padding-top technique does the same job in browsers too old to support aspect-ratio.
Heights in the table are rounded to whole pixels; the exact value is shown above it.
Make a blank image at the right size with the placeholder image generator. Our website design and development team handles media layout on every build.
Questions
Frequently asked.
How do I calculate height from width and aspect ratio?
Multiply the width by the second number of the ratio and divide by the first. For 16:9 and a width of 1920px, that is 1920 × 9 ÷ 16, which gives 1080px. To get the width from a height, multiply the height by the first number and divide by the second.
Do I still need width and height attributes on images?
Yes. Browsers use the width and height attributes on an img to work out its aspect ratio before it loads, which prevents layout shift. Set them to the image's real pixel size and use CSS to make it responsive. The aspect-ratio property is for elements with no built-in size, such as embeds and empty boxes.
Your next move
Like what you see? Tell us about it.
A process that takes too long, a website that undersells you, or an idea ready to take shape. Tell us where you are and we will suggest a useful next step.
India · Working with clients worldwide