Design tool
Aspect Ratio Calculator
Find the aspect ratio of any width and height, resize while keeping it, and browse common video, social and print ratios with CSS you can copy.
Free, no sign-up. Runs in your browser; nothing is uploaded.
Find the ratio of a size
16:9
Decimal 1.7778
Resize to keep the ratio
Based on 1920 x 1080. Type a new width or a new height and the other follows.
Or start from a ratio
Changing the width above fills the first calculator with the matching height.
CSS padding hack: padding-bottom: 56.25%
Common widths for this ratio
Common aspect ratios
How to use the aspect ratio calculator
Understanding aspect ratio
An aspect ratio describes the shape of a rectangle, not its size. Two screens of different sizes share a ratio when their width divided by height gives the same number. Knowing the ratio lets you scale pictures and video without squashing or stretching them.
Find a ratio
- Type a width and a height in the first box.
- The calculator reduces them to the smallest whole numbers, so 1920 x 1080 becomes 16:9. It also shows the decimal value (1.7778) and names the closest common ratio when you are very near one.
- Copy the ratio or the ready-made CSS rule.
Resize without distortion
Use the second box. Enter a new width and the height is worked out, or enter a height and get the width. The same ratio is applied, so the picture keeps its shape. A table of standard widths from 320 to 3840 pixels shows the matching heights at a glance.
Pick from common ratios
The list is grouped by use:
- Video: 16:9 for HD and 4K, 21:9 for ultrawide and 4:3 for older screens and slides.
- Social: 1:1 and 4:5 for feed posts, 9:16 for vertical video and 1.91:1 for link previews.
- Print: 3:2 for 4 x 6 inch photos, 5:7 for cards and the A-series paper ratio used by A4, A3 and A5.
- Screen: 16:10 for many laptops and 5:4 for older monitors.
Click any card to load it with your current width.
Using the result in CSS
Set aspect-ratio: 16 / 9; on an element and give it a width. The height follows automatically and keeps working when the element resizes. For very old browsers, wrap the content in a box with padding-bottom set to the percentage shown above and position the content absolutely inside.
Tips
- If your design has to fit two ratios, keep important content in the middle so cropping to either one is safe.
- Round to whole pixels. Fractional sizes can blur images.
- Remember that video encoders often want even numbers for width and height.
Frequently asked questions
What is an aspect ratio?
It is the proportion between width and height, written as two numbers such as 16:9. A 1920 x 1080 picture and a 1280 x 720 picture both have a 16:9 ratio, so one is just a scaled copy of the other.
How do I calculate a new height?
Multiply the new width by the original height and divide by the original width. The calculator does this for you, and works the other way round when you type a height.
Why does my ratio show as something odd like 683:384?
Sizes that are not exact multiples of a common ratio simplify to unusual numbers. The calculator shows the nearest common ratio, for instance 16:9, when you are within one percent.
How do I keep the ratio in CSS?
Use the aspect-ratio property, for example aspect-ratio: 16 / 9. Older browsers can use the padding-bottom percentage trick, which is also shown here.
Which ratio should I pick for social media?
Use 1:1 or 4:5 for Instagram feed posts, 9:16 for stories, reels and TikTok, 1.91:1 for link previews and 16:9 for YouTube and most video.