Free tools Windows power users keep installed
One-click scans. No signup required.
A lightweight aspect ratio calculator turns two dimensions into a width-to-height ratio—or uses a known ratio to calculate a matching dimension. The core math is a pair of proportions; JavaScript can present the results, while CSS is usually the better choice when a page element should keep its shape automatically.
What an aspect ratio means
An aspect ratio compares width with height, in that order. MDN Web Docs puts it simply: “The <ratio> is the ratio of the width and height, in that order.” (MDN Web Docs: Understanding and setting aspect ratios.)
As an Amazon Associate I earn from qualifying purchases.
A 16:9 ratio means 16 units of width for every 9 units of height. Because the units cancel, the same proportion applies to pixels, inches, or any other consistent unit. The decimal form is width divided by height: 16 ÷ 9 ≈ 1.7778. The pair 16:9 and the decimal 1.7778 describe the same proportion, but they are different ways of displaying it.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsHow to calculate the ratio or a matching dimension
Find the ratio from width and height
Divide width by height for the decimal value. To express the result as a simplified pair, divide both dimensions by their greatest common divisor. For example, 1920:1080 simplifies to 16:9 because both numbers divide evenly by 120.
#1 Best Overall
- live preview
- dark mode
- automated when submit values
Find height from a known width
For a ratio of w:h and a known width W, calculate height as W × h ÷ w. For example, at 16:9, a width of 1280 gives a height of 1280 × 9 ÷ 16, or 720.
Find width from a known height
For a ratio of w:h and a known height H, calculate width as H × w ÷ h. At 16:9, a height of 720 gives a width of 720 × 16 ÷ 9, or 1280.
Rank #2
- Calculate resolution width or height based on specified ratio.
- Calculate ratio from a given resolution width and height.
- Generate scaling information from a given resolution.
- Generate sizing information from a given ratio and diagonal.
- Get many more information from a given ratio and resolution.
Keep the output types distinct in a calculator: a ratio pair such as 16:9, its decimal value such as 1.7778, and a newly calculated width or height answer different questions. Round only for display where appropriate; retain adequate precision for the calculation itself.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →What a small JavaScript calculator should do
A useful interface makes it obvious which value is width and which is height, states which result is being shown, and explains whether a ratio pair is simplified. A person may want to calculate a ratio from two dimensions or enter a ratio and one dimension to find the other; label these as separate operations rather than mixing their inputs or outputs.
Validate input before dividing. Empty fields, text, zero, negative values, or non-finite numbers should produce a visible prompt or error rather than a result such as Infinity or NaN. These are implementation recommendations; the project title alone does not establish which behaviors a particular calculator implements.
When CSS is a better fit
If the goal is for a page element to keep a preferred shape as its layout changes, CSS can express that directly with the aspect-ratio property. MDN Web Docs notes: “At least one of the box’s sizes needs to be automatic in order for aspect-ratio to have any effect.” (MDN Web Docs: aspect-ratio CSS property.) In other words, the property influences preferred sizing when at least one dimension is not already fixed.
Rank #4
- screen
A JavaScript calculator instead takes explicit numeric dimensions and displays a computed ratio or matching dimension. A CSS media query using the aspect-ratio media feature is another, distinct tool: it can apply styles based on the viewport’s shape, including minimum and maximum ratio bounds. It does not calculate an image’s dimensions or substitute for a calculator when a person needs a numeric answer. See MDN Web Docs: aspect-ratio CSS media feature.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Using the result to maintain proportions
For an image, video, game view, or other rectangular content, calculate a matching dimension from the original ratio rather than resizing width and height independently. For example, maintaining 16:9 while changing a game view’s width means deriving its height with width × 9 ÷ 16. That keeps the same proportions across sizes; viewport-specific styling may still be needed when the screen shape changes.
For the CSS definition of the ratio notation, see MDN Web Docs: <ratio> CSS type.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
