Aspect Ratio Calculator
Enter width:height and one known dimension, or switch to CSS mode to create a ratio box. Use 16:9, 4:3, 1:1, 9:16, 21:9, 3:2, 2:3 or 4:5 presets, optional width and max-width, and a local preview. Physical mode accepts width and height, or a diagonal plus width:height ratio. Each named scenario has independent inputs and output units. Pixels describe a ratio, not a physical length.
A QUICK WALKTHROUGH
How to use this tool
- Choose dimensions, CSS or physical screen mode; keep the eight presets or enter a custom positive ratio.
- Enter the known dimension, validated CSS lengths, or physical size/diagonal and units; add named physical scenarios as needed.
- Calculate the complete table. Copy CSS separately or copy/download a fixed numerical report; edits invalidate previous results.
Numbers and reports
Positive finite decimals are accepted without an arbitrary size cap. Empty values, unsupported modes/units, overflow and nonzero results that underflow to zero are rejected. Integer ratio reduction uses the original decimal text and exact integer arithmetic. Screen dimensions and area use browser floating-point arithmetic; the report retains raw strings, parsed numbers, units, model and every full-precision result row. Displayed figures are not physical measurements.
Safe CSS lengths and preview
Optional width and max-width accept a positive number ≤100,000 followed by px, rem, em, %, vw or vh, up to 24 characters. Expressions and arbitrary CSS are rejected. Blank width uses 100%; blank max-width is omitted. CSS height/width must be 0.0001–10,000. The static preview scales to fit and does not apply those widths; CSS output is limited to 4,096 characters.
Fallback structure
Use the generated outer ratio-frame, inner ratio-box and ratio-content structure. The frame controls width. The fallback box uses height: 0 and padding-top: height/width × 100%, with absolute content inset: 0. A supports rule resets height to auto and padding to 0 before applying aspect-ratio. Everything runs locally.
Physical size and scenarios
Select width plus height or diagonal plus ratio for each named scenario. Linear conversion constants are 1 in = 2.54 cm = 25.4 mm and 1 ft = 12 in; area uses the squared output unit. Positive pixel dimensions may define the ratio but cannot determine a physical screen size. Copy report and TXT export contain the same fixed snapshot; Copy CSS contains CSS only.
GOOD TO KNOW
Common questions
Are decimal ratios allowed?
Yes. Positive finite decimals are accepted; an integer ratio is reduced only when both parts are integers.
Why is there an outer frame?
Percentage padding uses the containing block width. An outer frame ensures the fallback matches a custom width or max-width.
Does the preview use my width units?
No. It shows the ratio at a bounded display size. The generated CSS contains your validated lengths.
Can pixel dimensions determine the diagonal?
No. They determine width:height only. Enter physical width and height or a physical diagonal.
What happens after I edit an input?
Previous results and exports are cleared. Calculate again to create a new fixed report.