Aspect Ratio Calculator
Turn a resolution into a clean ratio, or keep a ratio fixed and solve for the side you don’t have — so media scales without stretching or letterboxing.
Fill the missing dimension
Lock a ratio, give one side, and get the other.
Ratios keep responsive media honest
The single biggest cause of a squashed thumbnail or a jumping layout is a width and a height that no longer share the element’s true proportions. Work from the ratio instead: reserve the space with CSS aspect-ratio, then let one dimension follow from the other. A quick reduction here is often all it takes to spot that a 1366×768 asset is really 16:9-ish, not a clean 16:9.
Once the box is the right shape, size the type inside it fluidly with the CSS clamp() generator.
Frequently Asked Questions
What is an aspect ratio?
It is the proportional relationship between an element's width and height, written as width:height. 1920×1080 reduces to 16:9 because both numbers share a factor of 120. The ratio, not the absolute size, is what keeps an image or video from stretching when it is scaled to fit a responsive container.
How do you reduce a resolution to a ratio?
Divide both the width and the height by their greatest common divisor. For 1920 and 1080 the GCD is 120, so 1920/120 : 1080/120 gives 16:9. This tool runs that reduction for you and also shows the ratio as a single decimal (16:9 ≈ 1.7778), which is what you would pass to the CSS aspect-ratio property.
How do I find a missing width or height?
Lock the ratio and give one side. To keep 16:9, a width of 1280 needs a height of 1280 × 9 ÷ 16 = 720; a height of 900 needs a width of 900 × 16 ÷ 9 = 1600. The 'fill the missing dimension' section does exactly that, which is handy when you are resizing a hero image or sizing a video embed to a fixed column width.
Should I use the CSS aspect-ratio property or the padding-top hack?
Modern browsers support the aspect-ratio property directly — aspect-ratio: 16 / 9 on a container reserves the right space and prevents layout shift with no wrapper element. The old padding-top percentage trick still works for very old browsers, but for new work the property is simpler and clearer. Either way you need the ratio, which is what this calculator gives you.
A convenience calculator for layout work. Round results to whole pixels where a rendered element cannot use fractional dimensions.