Aspect Ratio & Letterbox Calculator

Aspect ratio basics

An aspect ratio describes the proportional relationship between a display's width and height. It's written as two numbers separated by a colon, like 16:9. This means for every 16 units of width, there are 9 units of height. The ratio is found by dividing both pixel dimensions by their greatest common divisor (GCD).¹

A 1920×1080 display has a GCD of 120, so 1920/120 = 16 and 1080/120 = 9, giving 16:9. This is the most common ratio for HDTV, YouTube videos, and modern web content.² Knowing the ratio lets you scale dimensions without distortion: double the width and you must double the height to keep the same shape. Two resolutions can look very different in pixel count yet share the same ratio, which is why the simplified form is more useful than raw dimensions when you are comparing displays or planning content for multiple screens.

The math in both directions

The calculator runs the same arithmetic in both directions, and the formulas fit in one line each. To find an unknown height from a known width, multiply the width by the ratio's height number and divide by its width number: a 16:9 shape at width 1920 gives 1920 × 9 ÷ 16 = 1080, which is exactly the computation the Scale to Target section runs when you enter one dimension and leave the other blank. The ratio is a promise that the two dimensions stay proportional, so one known number is always enough.

The reverse direction is the same multiplication with the numbers swapped. To find an unknown width from a known height, multiply the height by the ratio's width number and divide by its height number, so a 16:9 target standing 1080 tall needs 1080 × 16 ÷ 9 = 1920 of width. Whether you size a video to a fixed player width or a print to a fixed frame height, the job is one of these two formulas, and the locks in the tool exist so you never have to think about which. Two directions, one piece of arithmetic.

Finding your own screen's ratio takes the same two numbers, and the lookup is worth a minute before a wallpaper, a game, or a full-screen project assumes anything. Every display reports its native resolution in the operating system's display settings, and pasting those two numbers into the calculator returns the simplified ratio alongside its common name, so a spec-sheet claim like 16:9 can be checked against what the panel actually runs. A resolution that simplifies to something unexpected is a fact genuinely worth knowing before you size content for it.

Common ratios

A handful of aspect ratios cover most of what you will encounter in video, photography, and web design. Each one became standard for a reason, usually driven by manufacturing constraints or the needs of a particular medium. Knowing which ratio a platform expects saves you from unexpected cropping or black bars.

Widescreen and standard formats

16:9 dominates modern displays. It is the standard for HDTV, 4K, and most online video.³ The format was originally proposed in 1984 as a compromise between the older 4:3 ratio and wider cinematic ratios, and it became the most common video ratio once HD broadcasting took off.³ 4:3 is the older standard for CRT monitors, NTSC and PAL video, and early computer displays. 21:9 is the ultrawide format used in cinematic displays and some gaming monitors, giving more horizontal space without increasing vertical height.

The ultrawide truth about 21:9

The ultrawide family is broader than its single marketing name suggests. Panels ship at 2560×1080 and 3440×1440 among other resolutions, and each one adds horizontal pixels without adding any vertical height, which is precisely the draw: a timeline, a spreadsheet, and a chat window sit side by side at readable sizes, and cinematic content fills more of the panel without stretching. Whether the wider shape pays off depends on the work, but the format's bet is that extra horizontal room is easier to put to use than extra vertical room would be.

The calculator exposes a wrinkle the marketing name hides. Paste 2560×1080 and the simplified ratio comes out 64:27, not 21:9, because panel makers round the name for familiarity while the actual pixel ratio is 64:27, about 2.37:1 against true 21:9's 2.33:1.⁴ The same effect appears one step up: 3440×1440 simplifies to 43:18, another ratio the 21:9 label politely rounds away. The GCD simplification the tool performs is exactly what makes the difference visible, and it is why the calculator's answer is the one to trust over the sticker on the box.

Square, photo, and tall formats

1:1 is the square format used for social media profile images and some mobile app interfaces. 16:10 is a slightly taller variant of 16:9 that was common on widescreen monitors and laptops before manufacturing costs shifted the industry toward native 16:9 panels. 3:2 is the native sensor shape of full-frame and APS-C cameras and also appears on some tablets and print formats.⁵ 9:16 is the vertical counterpart to 16:9 and has become the default for short-form mobile video on TikTok, Instagram Reels, and YouTube Shorts.

Some platforms accept several ratios but display them differently depending on where the image appears, such as a landscape feed thumbnail versus a full-screen vertical story. Checking your intended ratio against the platform's stated requirement before uploading prevents the automated cropping that often cuts off the most important part of the frame.

Print sizes and their ratios

Print sizes are ratios in disguise, and the disguise causes real crop damage. A 4×6 print holds the sensor's native 3:2 shape, so those prints come out uncropped. A 5×7 is 7:5 and an 8×10 is 5:4, both taller relative to their width than 3:2, so a full sensor frame printed at those sizes cannot keep all its pixels: the print shop trims the sides until the shape fits, and the crop is permanent unless you plan for it in advance. The wider the original, the more of it the taller print format eats.

The letterbox section previews that crop before any money changes hands. Enter the photo's dimensions as the source and the frame or print size as the display, and the preview shows exactly which strip of the image the mismatch consumes, together with the bar dimensions the shape difference produces. The same comparison answers the mat question a frame shop will ask: whatever the inner opening leaves visible follows the identical ratio math, so a print ordered with the crop in mind arrives with the subject intact rather than an edge the mismatch happened to claim.

Letterbox explained

When content and display do not share the same aspect ratio, players and editors fill the gaps with black bars. The effect is either letterboxing or pillarboxing, and the pixel size of those bars is determined by the difference between the two ratios. The same math applies whether you are scaling video, resizing images, or checking whether a design will fit a target screen without distortion.

How the bars are calculated

Letterboxing adds horizontal black bars at the top and bottom when widescreen content plays on a narrower display. Pillarboxing does the opposite, adding vertical bars on the left and right when tall content displays on a wide screen. The bar sizes depend on the difference between the source and target aspect ratios.⁶ In each case the source is scaled to fit along one axis while the other axis is padded to fill the remaining space.

Why the pixel sizes matter

If you are editing video, designing for multiple screen sizes, or building a web player, knowing the exact bar sizes in pixels helps you position overlays, subtitles, and UI elements so they do not end up hidden behind the padding. Guessing the bar size often places text or buttons where a player will cover them, which is hard to catch until you preview on an actual device. Enter your source resolution and target display above to see the exact bar dimensions before you export.

Aspect ratios in video encoding and streaming

Video codecs and streaming platforms encode at specific resolutions tied to standardised aspect ratios. H.264 uses 16×16 macroblocks, while H.265 uses flexible coding tree units rather than a fixed 16×16 block size.⁷ Encoders may internally pad dimensions and use frame cropping so playback displays the intended size, which is why video editors sometimes see thin black bars added automatically to footage that does not conform.⁸ YouTube, Vimeo, and most streaming platforms treat 16:9 as the canonical format; uploads at other ratios are padded with black bars or scaled depending on the platform's handling policy. Knowing your source ratio before uploading lets you pre-apply letterbox or pillarbox padding at the correct dimensions so the platform does not apply its own version.

Vertical video formats have become common on platforms designed for mobile viewing, with 9:16 as the standard for TikTok, Instagram Reels, and YouTube Shorts.⁹ This is simply the inverse of 16:9. When repurposing landscape footage for vertical formats, the letterbox calculator shows the pillar bars that would appear on either side of a 16:9 source displayed in a 9:16 container, helping you decide whether to crop centrally, pan and scan, or shoot new content natively at 9:16.

Responsive design and display density

High-DPI and Retina displays render physical pixels at twice or more the CSS pixel density. A CSS image element declared as 800 × 450 pixels displays at 1600 × 900 physical pixels on a 2x device, maintaining the same 16:9 ratio.¹⁰ When providing multiple image sources via the HTML srcset attribute, every scaled version must share the same aspect ratio to avoid layout shifts between breakpoints.¹¹ Using this calculator to verify that each scaled dimension pair reduces to the same simplified ratio catches mismatches before they reach production.

Thumbnails, open graph images, and app store screenshots each have fixed ratio requirements. Facebook's link preview uses approximately 1.91:1 (1200 × 630 pixels).¹² Twitter cards use 2:1 (1200 × 600).¹³ Apple App Store screenshots have device-specific required dimensions.¹⁴ Entering your source image dimensions into the calculator and checking whether the simplified ratio matches the platform's requirement immediately tells you whether cropping is needed, and the scale-to-target feature shows the exact output dimensions to use.