Aspect Ratio Calculator
Calculate aspect ratios, find missing dimensions, and get CSS output. Enter width and height to get the simplified ratio, CSS aspect-ratio value, padding-top percentage for the old CSS hack, and solve for missing width or height.
Ratio from Dimensions
aspect-ratio
Common Ratios
Solve for Missing Dimension
Fill in the two known values above to calculate the third.
What is an Aspect Ratio Calculator?
An aspect ratio calculator helps you work with the proportional relationship between an element's width and height. Aspect ratios are expressed as two numbers separated by a colon - for example 16:9 (widescreen video), 4:3 (traditional TV and monitors), or 1:1 (square, common for social media images). This tool simplifies any pair of dimensions into its lowest-terms ratio, provides the modern aspect-ratio CSS property value, and lets you solve for a missing dimension when you know the other two values.
CSS aspect-ratio vs padding-top hack
The modern approach is to use the aspect-ratio CSS property (supported in all modern browsers since 2021). For example, aspect-ratio: 16 / 9 maintains a 16:9 proportion as the element resizes. The older technique uses padding-top as a percentage of the element's width - since padding percentages are always relative to width, setting padding-top: 56.25% (which is 9/16 = 56.25%) forces a 16:9 ratio on the container. This hack is still useful when supporting very old browsers or when working inside a CSS framework that doesn't yet support the aspect-ratio property.
Common aspect ratios in web and video
Different platforms and contexts have standard aspect ratios. 16:9 is the universal widescreen standard for HD/4K video, YouTube, and most desktop monitors. 4:3 was the standard for traditional television and early computer monitors, still used in some presentation formats. 1:1 (square) is popular for Instagram posts and profile images. 9:16 (vertical widescreen) is used for mobile-first video on TikTok, Instagram Reels, and YouTube Shorts. 21:9 is the ultra-wide cinema ratio. 4:5 is used for Instagram portrait posts, which get more screen space in the feed. Understanding these ratios helps you plan image crops, video exports, and responsive container sizing.
Frequently Asked Questions
How do I maintain aspect ratio in CSS without the aspect-ratio property?
Use the padding-top percentage trick. Set the container to position: relative with height: 0 and padding-top: X% where X is (height / width) × 100. Then place the content inside an absolutely positioned child that fills the container. For example, a 16:9 box uses padding-top: 56.25% (9 ÷ 16 = 0.5625 = 56.25%).
How do I calculate the height from a width and aspect ratio?
Divide the ratio values to get the fraction, then multiply by your width. For a 16:9 ratio with a width of 1280px: height = 1280 × (9 ÷ 16) = 1280 × 0.5625 = 720px. Use the "Solve for Missing Dimension" section of this tool to perform this calculation automatically.
What does GCD (Greatest Common Divisor) have to do with aspect ratios?
To simplify a ratio like 1920:1080 to its lowest terms (16:9), you divide both numbers by their greatest common divisor. The GCD of 1920 and 1080 is 120, so 1920 ÷ 120 = 16 and 1080 ÷ 120 = 9. This tool uses the Euclidean algorithm to compute the GCD automatically.
How do I use aspect-ratio in Tailwind CSS?
Tailwind includes built-in aspect ratio utilities: aspect-video (16/9), aspect-square (1/1), and aspect-auto. For custom ratios in Tailwind v3+, use the arbitrary value syntax: aspect-[4/3]. In Tailwind v4 you can define custom ratios in your CSS config. These map directly to the aspect-ratio CSS property.