CSS Utility
CSS Aspect Ratio Calculator
Calculate width, height, or aspect ratio in real time. Preview the box live and copy ready-to-paste CSS — modern aspect-ratio, the padding-bottom hack, or a Tailwind class.
Editing one dimension automatically updates the other to maintain the locked ratio.
Result
Live preview
Preview is scaled to fit. Real proportions match your inputs.
CSS output
Modern aspect-ratio, the padding-bottom hack for legacy browsers, fixed dimensions, and a Tailwind utility — all auto-updating.
.box {
aspect-ratio: 16 / 9;
width: 100%;
}.box {
position: relative;
width: 100%;
padding-bottom: 56.25%;
}
.box > * {
position: absolute;
inset: 0;
}.box {
width: 1280px;
height: 720px;
}<div class="aspect-[16/9]"></div>
How to use
Pick a preset or type a custom ratio, then edit the width or height. The locked dimension updates instantly.
Good for
Responsive video embeds, image containers, OG card sizing, hero banners, and converting design mockups to CSS.
Browser support
aspect-ratio is supported in 95%+ of browsers since 2021. Use the padding hack for IE 11 / old Safari.
About the CSS Aspect Ratio Calculator
The CSS Aspect Ratio Calculator helps you keep elements perfectly proportional across screen sizes — videos, images, cards, and hero blocks all stay sharp without cropping or letterboxing. Enter any two of width, height, and ratio, and the third value is computed instantly.
- 12 popular preset ratios — 16:9, 4:3, 1:1, 21:9, 9:16, golden ratio, A4, and more
- Two modes: lock ratio (compute missing dimension) or free dimensions (compute ratio)
- Live visual preview scaled to fit the screen with the exact proportions
- Auto-simplified ratio output (e.g. 1280×720 →
16:9) - Four ready-to-paste CSS snippets: modern
aspect-ratio, padding-bottom hack, fixed dimensions, and a Tailwindaspect-[w/h]class - Six unit options:
px,%,em,rem,vw,vh - Padding-bottom percentage included for the legacy responsive trick
- Runs entirely in your browser — no signup, no uploads
How to Use the CSS Aspect Ratio Calculator
- 1
Choose a ratio (or stay in compute-ratio mode)
Click a preset chip like 16:9 or type your own width and height in the ratio inputs. Switch to Free dimensions → compute ratio if you want the tool to derive the ratio from your width and height instead.
- 2
Enter a width or height
Type any number into the width or height field. In lock-ratio mode the other dimension updates automatically. Pick a unit (px, %, em, rem, vw, vh) from the dropdown.
- 3
Read the live result
The result card shows the simplified ratio (e.g. 16:9), its decimal value (e.g. 1.7778), the padding-bottom percentage for the classic responsive trick, and your final dimensions.
- 4
Copy the CSS snippet
Use Modern for new browsers — that's the recommended one. Use padding-bottom hack if you need to support IE 11 or older Safari. Use Tailwind if your project uses Tailwind CSS.
- 5
Use ↔ Swap or Clear when needed
The Swap button flips width and height — handy for switching between landscape and portrait. Clear resets everything.
Tip: For responsive iframe videos, wrap the iframe in a div with aspect-ratio: 16/9 and set the iframe to width: 100%; height: 100%. The container stretches to its column and keeps the video proportional.
Common Use Cases
Responsive Video Embeds
- • 16:9 wrappers for YouTube and Vimeo iframes
- • 9:16 containers for vertical TikTok and Reels
- • No more CSS hacks — modern aspect-ratio just works
Image Cards & Thumbnails
- • Crop-free product cards with 1:1 or 4:3 ratios
- • Consistent grid layouts across all viewport sizes
- • Avoid CLS (Cumulative Layout Shift) for Core Web Vitals
Social Sharing Images
- • 1.91:1 for Facebook, LinkedIn, OpenGraph cards
- • 2:1 for Twitter / X large image cards
- • 1:1 for Instagram square posts
Hero Banners
- • Cinematic 21:9 or 2.39:1 widescreen heroes
- • Adaptive heights that scale with viewport width
- • Predictable rendering on every device
Design-to-Code Handoff
- • Convert Figma frame sizes to ratios instantly
- • Match Sketch artboards to CSS containers
- • Generate Tailwind
aspect-[w/h]classes
Photography & Print
- • 3:2 for DSLR photos and prints
- • 4:5 for portrait prints and Instagram portrait
- • A-series (√2) for European paper sizes
Frequently Asked Questions
What is an aspect ratio?
An aspect ratio is the proportional relationship between an element's width and height. A 16:9 ratio, for example, means the element is 16 units wide for every 9 units tall — the standard shape of HD video and most modern screens.
What does aspect-ratio do in CSS?
The aspect-ratio CSS property automatically derives one dimension from the other to maintain a fixed proportion. Setting aspect-ratio: 16 / 9 on a div with width: 100% makes the height resize automatically to 9⁄16 of the width.
Should I still use the padding-bottom hack?
Only if you need to support very old browsers (IE 11, Safari ≤ 14.0). For everyone else, aspect-ratio has been supported across Chrome, Edge, Firefox, and Safari since 2021 with 95%+ global coverage. The tool generates both so you can pick whichever fits your audience.
Why is the padding-bottom percentage what it is?
The padding-bottom hack works because percentage paddings are calculated relative to the parent's width, not its height. So if you want a 16:9 box, you set padding-bottom: 56.25% — which is 9 ÷ 16 × 100. The calculator does this math for you for any ratio.
What's the difference between 16:9 and 1.7778?
They're the same ratio expressed differently. 16:9 is the integer form; 1.7778 is the decimal (16 ÷ 9). CSS accepts both: aspect-ratio: 16 / 9 and aspect-ratio: 1.7778 produce the same result.
Can I use units like rem or % for the dimensions?
Yes — the calculator includes px, %, em, rem, vw, and vh. The unit only affects the "Fixed dimensions" snippet; the modern aspect-ratio snippet is unitless on purpose.
How do I find the ratio of an existing image or video?
Switch to Free dimensions → compute ratio mode, enter the width and height in pixels, and the tool gives you the simplified ratio (greatest common divisor reduced), the decimal, and the padding-bottom percentage.
What's the golden ratio and when should I use it?
The golden ratio is approximately 1.618 — a proportion that appears in nature and is widely considered aesthetically pleasing. It's a popular choice for hero sections, card layouts, and logo placement when you want an "intentionally designed" feel.
Does this tool send my data anywhere?
No. Every calculation runs in your browser using SvelteKit and client-side JavaScript. Nothing is uploaded, logged, or persisted. Close the tab and your data is gone.