Aspect Ratio Calculator
Work out the missing width or height for any aspect ratio, and get the aspect-ratio CSS to lock it in.
Work out the missing dimension for any aspect ratio, and get the CSS to lock it in.
Result
1280 x 720
ratio 16:9
Shape
1280 x 720About the aspect ratio calculator
Setting aspect-ratio in CSS reserves the right amount of space before an image or video loads, which prevents the layout shift that Core Web Vitals measures. It replaced the old padding-top percentage hack entirely.
The calculator also reduces your dimensions to their simplest ratio, which is the form the CSS property wants.
How to use it
- 1Enter the original width and height.
- 2Enter either the new width or the new height and leave the other at zero.
- 3Read the solved dimension and the simplified ratio.
- 4Copy the CSS.
Questions
Why use aspect-ratio instead of padding-top?
It is a single declaration that does the same job with none of the wrapper markup the padding hack required, and it is supported everywhere now.
Does aspect-ratio prevent layout shift?
Yes. The browser reserves the correct space before the media loads, which is the main cause of shift on image-heavy pages.
What are the common video ratios?
16:9 for landscape video, 9:16 for vertical, 1:1 for square feeds and 4:5 for Instagram portrait posts.