Aspect Ratio Calculator

Calculator · CSS output · responsive

Enter width and height and get the simplified ratio, rescaled dimensions and CSS code. Modern aspect-ratio syntax and padding-top fallback for extended browser compatibility.

Aspect ratio
Dimensions
width (px)
height (px)
Units:
Lock aspect ratio when resizing
Common sizes (for this ratio)
Container width

Compute height for typical container widths

16 : 9

                                        


                                        

                                            

                                        


                                        

                                            

                                                
Aspect ratio in CSS
Modern approach: aspect-ratio is widely supported and the right default for new work.
.box {
  width: 100%;
  aspect-ratio: 16 / 9;
}
Legacy approach: percentage padding-top is calculated from the element's width, which forces a ratio when aspect-ratio is not an option.
.wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.inner {
  position: absolute;
  inset: 0;
}
WordPress: for ACF or thumbnail images, pair aspect-ratio with object-fit: cover.
.card-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  display: block;
}
For embedded video iframes with very old browser requirements you may still rely on padding-top and absolute positioning; otherwise prefer aspect-ratio.
                                            

                                        

                                    

                                

                            

                        

                    


                    

                        
Aspect ratio is fundamental in building responsive layouts: images, videos, cards and hero sections must maintain correct proportions on every device. The modern CSS aspect-ratio property has replaced the old padding-top percentage hack, but knowing both is necessary for wide compatibility.
This calculator:
  • Calculates the simplified aspect ratio (e.g. 1920×1080 → 16:9)
  • Calculates proportional dimensions given a constraint
  • Generates CSS with aspect-ratio: 16/9 (modern syntax)
  • Generates the equivalent percentage padding-top
  • Useful for embedded YouTube/Vimeo video containers
Why use an aspect ratio calculator
  • Figma: set a frame ratio and get matching width/height pairs aligned with production CSS.
  • Ready-to-paste CSS: aspect-ratio, padding-top fallback, and :root variables for themes.
  • Responsive workflow: quick lookup table and live preview of proportions.
Related tools: Spacing Scale Generator and Design Token Formatter.