Aspect Ratio Calculator
Image and video aspect ratio calculator — calculate width or height while keeping the ratio, determine the ratio of any image, get ready-to-use CSS code and check letterbox bars. Free, no sign-up.
Common
Social media
Print and paper
Cinema and video
Width (px)
1920
Height (px)
1080
Megapixels
2.07
Ready-to-use code
Download PNG guide
Generates a PNG image in the exact selected ratio, clean and unmarked. Useful as a framing template or design base. The longest side is 2048px.
About this tool
Free online aspect ratio calculator for anyone working with video, design and web development. The tool solves the proportion between a ratio (16:9, 4:3, 1:1, 21:9 and dozens of others) and the width and height fields: type one dimension and the other is calculated instantly, keeping the ratio intact. It also determines the ratio of any image you already have, delivers ready-to-paste CSS code, shows a preview that resizes in real time, and calculates letterbox bars so you know how much black bar is left when fitting content into a container of a different ratio. Everything runs in the browser, no sign-up.
Features
How aspect ratio calculation works
An aspect ratio is the relationship between width and height, written as two numbers separated by a colon. In 16:9, for every 16 units of width there are 9 of height. The calculation is a simple proportion: height comes from width × (9 ÷ 16) and width from height × (16 ÷ 9). To determine the ratio of any image, you divide its width and height by the greatest common divisor between them, which reduces, for example, 1920×1080 to its simplest form 16:9. This is the same principle the calculator applies to keep any resize free of distortion.
Use Cases
The most common uses of the aspect ratio calculator in the daily routine of those who produce visual content and code are:
- Video editing and exportConvert a 4K master to HD, set output resolutions and find the correct height of a widescreen crop without distorting the image.
- Banners and responsive layoutSet the height of a banner from a fixed width and generate the CSS aspect-ratio that keeps the proportion on any screen.
- Social media contentGet Story 9:16 (1080×1920px), Instagram feed 4:5 (1080×1350px) and YouTube thumbnail 16:9 (1280×720px) right before exporting, avoiding unwanted crops on publishing.
- Responsive embedded videoGenerate the iframe pattern with proportional padding to embed video players that adapt to the container width.
- Performance and Core Web VitalsFill in the width and height attributes of images to reserve layout space and reduce cumulative layout shift (CLS).
- Print and layoutCalculate proportional dimensions for A4, photos and printed materials from a known measurement.
How to Use
Choose the ratio
Type the two numbers of the ratio or click one of the presets organized by context. The preview and the code update instantly.
Enter one dimension
Fill in the width or the height. The opposite field is calculated automatically, keeping the chosen ratio.
Copy the code
Use the copy buttons to take the CSS aspect-ratio, the image attributes or the responsive iframe straight into your project.
Check the letterbox (optional)
Turn on the bar calculation, enter the container size and see how much black bar is left when fitting the content.
Frequently Asked Questions
An aspect ratio is the relationship between the width and height of an image, video or screen. It is written as two numbers separated by a colon, such as 16:9 or 4:3. The first number represents the proportional width and the second, the height. A 16:9 ratio does not state the real size in pixels, only that the width is always 16/9 times the height, whether on a 1280×720 or a 3840×2160 video.
Just multiply the width by the ratio's height and divide by the ratio's width. For a width of 1200px in 16:9, the math is 1200 × 9 ÷ 16, which gives 675px of height. The calculator does this automatically: you choose the ratio, type the width and the height appears already calculated. The reverse path, finding the width from the height, follows the same logic by swapping the terms.
They are ratios with different shapes. 4:3 is almost square, the standard of old TVs and monitors. 16:9 is the current widescreen, used on nearly all online video, TV and phones held horizontally. 21:9 is ultrawide, more elongated, common on productivity monitors and on films with a cinematic feel. The larger the difference between the two numbers, the more elongated and panoramic the image.
They are the black bars that appear when content is shown in a space of a different ratio, without cropping anything. Letterbox are the horizontal bars on the top and bottom, common when watching a widescreen film on a more square screen. Pillarbox are the vertical bars on the sides, which appear when showing a more square video on a widescreen screen. The calculator tells you exactly how many pixels of bar are left in each case.
The CSS aspect-ratio property reserves an element's space in the desired ratio without having to fix the height. For a 16:9 block, you just write aspect-ratio: 16 / 9 and the browser calculates the height from the available width. It is the modern way to keep responsive proportions and replaces the old padding-bottom percentage trick. The calculator generates this line already with the values of the selected ratio.