CSS Aspect Ratio Calculator
Find the simplified aspect ratio of any width and height, and the CSS to match.
About this tool
Find the simplified aspect ratio of any width and height, along with the CSS aspect-ratio property value to match.
Key Features
- Simplifies any dimensions to their lowest-terms ratio
- Generates the CSS aspect-ratio property value
- Works with any unit — pixels, inches, or plain numbers
- Instant results
How to Use
- Enter a width and height.
- Click Calculate.
- Read the simplified ratio and the CSS to match it.
Benefits
- Check whether an image or video matches a standard ratio like 16:9
- Get the exact CSS to lock an element to a specific ratio
- Understand what ratio a set of dimensions actually reduces to
Frequently Asked Questions
The width and height are both divided by their greatest common divisor, the same technique used to reduce a fraction to its lowest terms. For example, 1920 and 1080 share a greatest common divisor of 120, so dividing both by 120 gives the familiar 16:9.
It tells the browser to maintain a fixed ratio between an element's width and height automatically — commonly used for images, video embeds, and placeholder boxes so they reserve the correct space before content loads, helping avoid layout shift.
The aspect-ratio property has been supported in all major browsers since 2021, so it is safe to rely on for most modern projects. Before it existed, developers commonly used a padding-percentage trick to fake a fixed ratio, which is no longer necessary in current browsers.