Utility · CSS unit tool
Aspect ratio calculator
Divide both dimensions by their greatest common divisor to simplify a ratio: 1920×1080 reduces to 16 / 9. Use the result with the CSS `aspect-ratio` property to reserve space and stop layout shift.
aspect-ratio: 16 / 9;
Keyboard tip: press Tab or Shift+Tab to switch fields.
How the ratio is reduced
The calculator finds the greatest common divisor (GCD) of width and height, then divides both by it. 1280×720 → GCD 720 → 16 / 9; 1200×900 → GCD 300 → 4 / 3.
A simplified ratio is easier to reason about and is exactly what the `aspect-ratio` property expects.
Using the aspect-ratio property
`aspect-ratio: 16 / 9` reserves the correct box before media loads, which prevents Cumulative Layout Shift (CLS)—a Core Web Vitals metric.
Pair it with `object-fit: cover` (or `contain`) so images fill the reserved box without distortion.
Copy-ready examples
.thumb {
aspect-ratio: 16 / 9;
object-fit: cover;
}Frequently asked questions
- How does aspect-ratio help Core Web Vitals?
- It reserves space for media before it loads, preventing the layout shift that hurts your CLS score.
- What is 1920×1080 as a ratio?
- 16 / 9. Both numbers divide by their GCD (120) to give 16 and 9.
- Is aspect ratio calculator free to use?
- Yes. UnitCraft calculators are free and run entirely in your browser.
- Does UnitCraft send my input values to a server?
- No. Calculator inputs are processed locally in the browser tab.
- Can I copy the generated CSS output?
- Yes. Each tool provides copy-ready snippets so you can paste values directly into code.