Aspect Ratio Calculator
Compute CSS aspect-ratio from any width × height, simplify ratios (16:9, 4:3, 1:1, …), find a missing dimension, and copy production-ready CSS/Tailwind/JSX. Live visual preview and a library of common ratios.
16:9 16 / 9 1.7778 About this tool
An aspect ratio describes the proportional relationship between an element's width and height, written as W:H. This calculator reduces any pair of dimensions to its simplest ratio, finds a missing side, and produces copy-ready code for plain CSS, Tailwind, React inline styles, SCSS, or HTML.
Example: a 1920 × 1080 image reduces to 16:9 and emits aspect-ratio: 16 / 9;. If you only know the ratio and one side — say 4:3 with a height of 900px — the tool solves the width: 1200px.
Useful when sizing video thumbnails, hero images, responsive cards, social-media crops (Instagram 4:5, YouTube 16:9, X/Twitter 2:1), and any layout where a container should hold a fixed shape while scaling fluidly.
FAQ
What does "aspect-ratio" do in CSS? ›
The CSS property aspect-ratio: 16 / 9 makes an element keep that width-to-height ratio automatically. If you set width: 100% and height: auto, the browser computes the height for you, so the box never distorts as the viewport changes.
How do I use the result in Tailwind? ›
Tailwind v3.4 and later supports arbitrary aspect-ratio values: class="aspect-[16/9] w-full". The "Tailwind" output tab generates the exact class string for the current ratio.
Why does 1920×1080 show as 16:9 but 1920×1200 shows as 16:10? ›
The tool divides both numbers by their greatest common divisor. gcd(1920,1080)=120, giving 16:9; gcd(1920,1200)=120, giving 16:10. Both are real-world laptop/screen standards.
Can I enter a decimal like 1.7778? ›
Yes. The parser accepts "16:9", "16/9", "16x9", "1920x1080", or a single decimal like 1.7778 (treated as 1.7778:1). All of them reduce to the same canonical ratio.