Calculate and simplify an aspect ratio
Simplify a width and height to their aspect ratio, or solve a missing dimension from a target ratio, with a CSS aspect-ratio value.
Simplify a width and height down to their ratio, or solve a missing dimension from a target ratio.
Or start from a common preset like 16:9 or 1:1.
Includes a ready-to-use CSS aspect-ratio value.
Frequently asked
What does the CSS aspect-ratio property do?
It tells the browser to maintain a fixed width-to-height ratio for an element, even before its content (like an image) has loaded, preventing layout shift.
How is the ratio simplified?
By dividing both the width and height by their greatest common divisor, the same math you'd use to reduce a fraction. 1920x1080 simplifies to 16:9.
What does 'solve dimension' mode do?
Given one known dimension (say, a width of 800px) and a target ratio (like 16:9), it calculates the matching height, useful for sizing an image or video container to fit a specific ratio.