Aspect Ratio Calculator

Calculator · CSS output · responsive

The Aspect Ratio Calculator derives width and height in pixels from a ratio (e.g. 16:9, 4:5), outputs CSS snippets using aspect-ratio plus the padding-top technique for older cases, and includes a dimension table for common widths. Ideal for Figma frames and for front-end work on cards, images, and responsive video.

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.
                                            

                                        

                                    

                                

                            

                        

                    


                    

                        
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.