Aspect ratio calculator
Three modes: dimensions to ratio, lock a ratio to find the other side, or fit/fill math for contain and cover.
Dimensions
Reduced ratio:
Decimal:
Lock ratio
Height: px
Width: px
Fit / fill
Letterbox:
Crop:
Rendered: px
CSS output
aspect-ratio property
Old way (padding-top hack)
Values are saved in the URL for sharing.
About this tool
The aspect-ratio CSS property keeps a box at a fixed width-to-height proportion. Before it existed, developers used a padding-top percentage hack on a wrapper.
For video embeds and responsive media, getting the ratio right prevents layout jump when content loads.
Fit/fill mode shows the pixel math behind object-fit: containand cover — letterboxing leaves empty bars, cover crops the overflow. Lock-ratio mode is handy when a design spec says 16:9 and you only know the width. The legacy padding-top hack is still useful when you must support very old browsers withoutaspect-ratio.