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.
~~~