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.

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.

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 Micro Four Thirds photo standard 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.

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.