CSS Aspect Ratio Calculator
Compute CSS aspect-ratio from width and height (or vice versa). Includes the legacy padding-top hack for older browsers, and common ratio presets (16:9, 4:3, golden ratio, square).
How to use the CSS Aspect Ratio Calculator
Set width and height; the simplified ratio (e.g., 1920×1080 → 16:9) is computed. Output is both modern aspect-ratio and the padding-top fallback for IE11/very old browsers. Most projects can use just the modern property.
Locking an element to a ratio
Holding an element to a fixed proportion — a 16:9 video, a square thumbnail, a 3:2 card image — used to require the “padding-top hack,” where a percentage padding faked the height because percentages resolve against width. The modern aspect-ratio property does it directly, but you still need the ratio in lowest terms and sometimes the fallback for legacy browsers.
Enter a width and height and this reduces them to a clean ratio (1920×1080 becomes 16:9), with presets for common formats and both the modern property and the padding-top fallback. For responsive sizing of other properties, the clamp() calculator handles fluid values, and the media query generator covers breakpoint-based changes.
Common use cases
- Video embeds — keep an iframe at 16:9 without letterboxing.
- Image thumbnails — force a consistent square or 4:3 crop area.
- Card media — hold every card image to the same proportion.
- Responsive boxes — size a container by ratio rather than fixed height.
- Legacy support — grab the padding-top fallback for very old browsers.