Overview
A calculator for aspect ratios that reduces any width-height pair to its simplest form, shows the decimal value, computes the height for a known width, and emits the CSS aspect-ratio property. Seven presets cover the common formats from 16:9 video to 2.39:1 cinema scope, and a dashed preview box renders the ratio live.
How It Works
Pick a preset such as 16:9 HD, 9:16 Story or 21:9 Ultrawide, or type your own ratio width and height. Enter a known width in pixels and the tool returns the matching height, the reduced ratio using the greatest common divisor, and the decimal ratio to four places. The preview box scales to the ratio, and the code panel emits a .aspect-box class with the aspect-ratio property and a fluid width you can copy.
Step-by-Step Usage Guide
- Choose a preset or enter custom ratio dimensions.
- Enter the known width to get the matching height.
- Read the reduced and decimal ratio from the stat tiles.
- Copy the aspect-ratio CSS snippet.
Technical Specifications & Standards
Reduction uses the Euclidean algorithm for the greatest common divisor, so 1920 by 1080 collapses to 16:9 before anything else happens. Ratio components are rounded to integers first, which matters for the 2.39:1 cinema preset: the ratio display and the CSS output both round 2.39 to 2, producing 2:1, even though the height calculation itself uses the unrounded value. If you need the true cinemascope ratio in CSS, write aspect-ratio: 2.39 directly, since the property accepts decimal numbers as well as slash-separated pairs. The aspect-ratio property shipped in Chrome 88, Edge 88, Firefox 89 and Safari 15, and it defines a preferred ratio applied when at least one dimension is auto; explicit sizes on both axes override it.
Targeted Use Cases
- Sizing video embeds and iframes before the media loads.
- Reserving layout space for images to prevent cumulative layout shift.
- Working out canvas and thumbnail dimensions for social formats.
- Converting legacy padding-hack ratio containers to the modern property.
Notes & Gotchas
- Set aspect-ratio with a fluid width so the box reserves space before content arrives.
- Remember both dimensions explicit wins over the ratio; leave one auto.
- Use the decimal form like 2.39 for ratios that do not reduce to small integers.
- Check the reduced ratio tile to confirm the preset matches the format you actually need.
Frequently Asked Questions
Why does the 2.39:1 preset show a 2:1 ratio?
The reduction step rounds ratio components to integers, so 2.39 becomes 2 and the displayed ratio plus the CSS output read 2:1. The height calculation still uses the exact 2.39 value; write aspect-ratio: 2.39 by hand if you want the exact figure in CSS.
Which browsers support the aspect-ratio property?
Chrome and Edge since 88, Firefox since 89 and Safari since 15. Older browsers ignore the declaration and fall back to the natural sizing behaviour.
Does aspect-ratio override explicit width and height?
No. It provides a preferred ratio used when at least one dimension is auto. If you set both width and height explicitly, the box uses those sizes and distorts.
How is the reduced ratio computed?
The tool divides both numbers by their greatest common divisor using the Euclidean algorithm, so 1920 by 1080 becomes 16:9. Decimal inputs are rounded before the reduction.