~/css/aspect-ratio-calculator
CSS Aspect Ratio Calculator
Enter a width and height to get the simplified ratio, the decimal value and the CSS you need: the modern aspect-ratio property and the older padding-bottom percentage. Change the target width to see the matching height for any size.
Using the CSS Aspect Ratio Calculator
What an aspect ratio is
An aspect ratio is the relationship between width and height, written as width:height. 1920 by 1080 simplifies to 16:9 because both divide by 120. Any element with the same ratio has the same shape, whatever its size.
The aspect-ratio property
Modern CSS lets you write aspect-ratio: 16 / 9 on an element with a set width, and the browser calculates the height. It is the simplest way to reserve space for videos, embeds and image placeholders so the page does not jump when they load.
The padding-bottom fallback
Before aspect-ratio existed, developers used a wrapper with padding-bottom set to height divided by width as a percentage, because vertical padding percentages are based on the width. You only need it for very old browsers, but it is included for completeness.
Preventing layout shift
Images and videos without reserved space push content down when they arrive, which hurts Core Web Vitals. Set width and height attributes on images, or an aspect ratio in CSS, so the browser knows the shape before the file loads.
Frequently asked questions
What ratio should I use for video?
16:9 for standard landscape video, 9:16 for vertical video such as Shorts and Reels, and 1:1 or 4:5 for social feed posts.
Does aspect-ratio work with images?
Yes. Combine it with object-fit: cover to crop the image to the shape without stretching it.
Is the calculation done in my browser?
Yes. Nothing is uploaded.