CSS Aspect Ratio Calculator

Controls

Output & CSS

Calculated Height 1080
Ratio 16 / 9

Common Screen Sizes

CSS Output

 
   
 
 
   
 
 
 
How to Use
 
     
  1. Enter a width — Type the element's width in pixels to calculate the corresponding height.
    2.  
  2. Select a preset ratio — Choose 16:9, 4:3, 1:1, 3:2, or 21:9 for common aspect ratios.
    3.  
  3. Use custom ratio — Click "Custom" and enter any width:height ratio you need.
    4.  
  4. View common sizes — The table shows calculated heights for 1920px, 1280px, 768px, and 375px widths.
    5.  
  5. Copy CSS — Get the aspect-ratio property ready to paste into your stylesheet.
    6.  
 
 
 
What Is the CSS aspect-ratio Property?
 
The aspect-ratio property locks an element's width-to-height relationship. When you set a width, the browser calculates the height automatically — no JavaScript needed. This is ideal for responsive images, video embeds, and cards that must maintain their proportions at any size.
 
It's supported in all modern browsers and replaces older hacks like the "padding-top percentage trick" with clean, readable syntax.
 
 
 
Common Use Cases
 
 
Responsive video embeds
 
Image placeholders
 
Uniform card thumbnails
 
Canvas elements
 
Map containers
 
Social media preview boxes
 
 
Tips & Best Practices
 
 
 Combine with width: 100% 
Pairing aspect-ratio with width: 100% creates a fully fluid element that scales with its container while keeping its proportions.
 
 
 Use on img elements 
Adding aspect-ratio to img tags prevents layout shift during image loading — the browser reserves the correct space before the image loads.
 
 
 Override with explicit dimensions 
If an element has both aspect-ratio and an explicit height, the explicit height wins. This lets you override the ratio when needed without removing the property.
 
 
 16:9 for video 
16:9 is the standard widescreen ratio for most YouTube, Vimeo, and web video. 4:3 suits older videos; 21:9 is cinematic ultrawide.
 
 
 
Frequently Asked Questions
 
 
How was aspect ratio handled before the CSS property existed?
 
Developers used the "padding-top hack": setting padding-top to a percentage (e.g. 56.25% for 16:9) on a container with position: relative and absolutely positioning the child. The aspect-ratio property makes this unnecessary.
 
 
 
Does aspect-ratio work on all HTML elements?
 
Yes — it works on any block or inline-block element, as well as flex and grid items. It's especially useful on img, video, iframe, and div containers.
 
 
 
What is the 16:9 ratio in decimal form?
 
16 divided by 9 is approximately 1.777. To calculate height: divide the width by 1.777. To calculate width: multiply the height by 1.777.
 
 
 
Can I use aspect-ratio without a width?
 
Yes. If the element has a defined height but no explicit width, the browser calculates the width using the ratio. This is less common but fully supported.