.aspect-box { aspect-ratio: 16 / 9; width: 1920px; height: 1080px; }
Calculate image and video aspect ratios online with our free Aspect Ratio Calculator. Solve missing width or height based on standard target ratios (16:9, 4:3, 1:1, 21:9), generate CSS code rules, and preview container bounds live in browser memory.
Choose a standard aspect ratio preset (16:9, 4:3, 1:1) or select a quick social media chip.
Type your target width or height value in pixels into the input panel.
Read the calculated missing dimension, preview the container box, and copy the generated CSS rule.
Solves missing height from width or missing width from height instantly using proportional cross-multiplication.
Generates modern CSS aspect-ratio container declarations for web design workflows.
All calculations execute locally in browser memory. Dimensions and aspect ratios are never sent to external servers.
An aspect ratio represents the proportional relationship between a display container or image's width and height (\(W : H\)). When resizing media without distortion, cross-multiplication maintains proportionality: \(\text{Height} = \text{Width} \times \left(\frac{H_{\text{ratio}}}{W_{\text{ratio}}}\right)\) and \(\text{Width} = \text{Height} \times \left(\frac{W_{\text{ratio}}}{H_{\text{ratio}}}\right)\).
To reduce arbitrary pixel dimensions into simplified integer ratios, our calculator applies the Euclidean Greatest Common Divisor algorithm: gcd(a, b) = b ? gcd(b, a % b) : a. Dividing width and height by their GCD transforms 3840×2160 into 16:9.
The visual preview element applies dynamic CSS aspect-ratio: W/H properties, allowing designers and video editors to preview container proportions live before importing media into editing software.