Calculate and preview CSS aspect-ratio values with common presets and responsive container sizing.
Enter a pixel width and height, or pick a preset like 16:9, 4:3, 1:1, or 21:9, and the tool reduces the pair to its lowest integer ratio using the greatest common divisor, then writes the resulting aspect-ratio: w / h; declaration. A live preview box demonstrates how that ratio holds as its container width changes. The thing people most often get wrong: aspect-ratio is a sizing hint, not a hard constraint. It only takes effect when at least one used dimension is auto; an element with both width and height explicitly set has no auto dimension left for the ratio to fill, and layout contexts that resolve both dimensions through other means, such as stretch alignment in a flex or grid parent, can similarly leave no room for the ratio to apply.
A concrete input and expected output from the current implementation.
Input
1920x1080
Expected output
aspect-ratio: 16 / 9;
1920 and 1080 share a greatest common divisor of 120; dividing both by 120 reduces the pair to the lowest-terms ratio 16:9, which becomes the CSS value.
The tool runs the Euclidean algorithm on the two numbers you enter to find their greatest common divisor, then divides both by it to reach the lowest-terms ratio: 1920x1080 becomes 16:9, 800x600 becomes 4:3. That reduced pair is written directly into the aspect-ratio: width / height; declaration, so the output CSS is never left as an unreduced fraction.
A sample container is rendered with the resulting aspect-ratio value applied and only its width constrained; the browser's own layout engine computes the height. Dragging the preview wider or narrower shows exactly how the ratio holds at arbitrary sizes, which reflects real rendering behavior rather than a separately simulated calculation.
aspect-ratio is a sizing hint, not a forced constraint. Competing explicit width and height, min/max constraints, or a flex/grid parent that resolves both dimensions through stretch alignment can leave no auto dimension for it to fill in your real layout, while the tool's preview box has no such competing rules and always shows the ratio applied cleanly.
No. It outputs only the aspect-ratio declaration. For older browser support you would need to add the padding-top percentage hack or a JavaScript polyfill separately; this tool does not produce that fallback code.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.