Install from Microsoft Store
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).1
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.2 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.
Aspect Ratio & Letterbox Calculator: Width, Height, and Ratio in Seconds
The calculator has three parts that share one set of source dimensions: Source Dimensions reduces a width and height to the simplified ratio and names the matching standard, Scale to Target recalculates the other side when you enter a target width or height, and the Letterbox section returns the bar sizes for a display with a different ratio. The guide below walks through each part, the edge cases and the common mistakes.
Aspect ratios control how every screen displays every image. Enter any width and height into the calculator and it instantly returns the simplified ratio, the preset name if a matching standard exists, and the scaling formula for any target size. No uploads, no accounts, and no ads between you and the result. The CapyToolkit aspect ratio calculator runs every computation in your browser, keeping your dimensions private while delivering the same mathematical precision as dedicated video production tools.
Three needs drive most visits: finding the height for a given width, finding the width for a given height, or calculating letterbox bar sizes when source and display ratios differ. Each case involves the same core formula. Divide width by height to get the decimal ratio, then scale proportionally, but the letterbox calculation adds a second ratio to the equation. This guide covers all three scenarios with concrete pixel values, ratio names, and real-world examples from video, photography, and display hardware.
What an aspect ratio is
An aspect ratio describes the proportional relationship between width and height. The ratio 16:9 means that for every 16 units of width, there are 9 units of height. Finding it from pixel dimensions uses the greatest common divisor (GCD): for 1920×1080, GCD = 120, so 1920/120 = 16 and 1080/120 = 9. Common named ratios include 16:9 (widescreen HD), 4:3 (standard definition), 21:9 (ultrawide), 16:10 (tall widescreen), and 3:2 (photography and print).1 Each maps to specific display hardware: a 2560×1440 QHD monitor is 16:9, a 1920×1200 WUXGA monitor is 16:10, and a Surface Pro 9 is 3:2. Consequently, knowing the ratio is the starting point for every scaling, export, and layout calculation you encounter in digital content work.
How to use the calculator
Enter the source width and height in the Source Dimensions section. The calculator displays the simplified ratio and matches it to a known standard if one exists. To scale the source to a new size, enter a target width or target height in Scale to Target, the locked dimension recalculates automatically. To find letterbox bar sizes, enter the target display dimensions in the Letterbox section. The calculator shows the bar height in pixels for top-bottom letterboxing or bar width for left-right pillarboxing. Use the presets dropdown to start from common resolutions like 1920×1080, 3440×1440, or 3840×2160 without typing every time.
Source Dimensions and ratio identification
Enter the source width and height in the Source Dimensions section. The calculator displays the simplified ratio and matches it to a known standard if one exists. The GCD reduction runs automatically, so entering 1920×1080 returns 16:9, entering 2560×1080 returns 64:27, and entering 3840×2560 returns 3:2. This identification step is essential when you receive assets from multiple sources and need to confirm their aspect ratios before processing them further.
Try the identification on the ratios that most often get mislabeled. Enter 2560×1080 and the calculator returns 64:27 rather than 21:9, and entering 3440×1440 returns 43:18, so you can name the panel correctly before sending assets to a colleague. The same check on 1920×1200 returns 8:5, which tells you a 16:10 deliverable from a 16:9 source will need letterbox bars.
Scale to Target and Letterbox sections
To scale the source to a new size, enter a target width or target height in Scale to Target, the locked dimension recalculates automatically. To find letterbox bar sizes, enter the target display dimensions in the Letterbox section. The calculator shows the bar height in pixels for top-bottom letterboxing or bar width for left-right pillarboxing. The ratio lock buttons keep width and height proportional as you adjust values, preventing accidental distortion. These three sections work together: identify the ratio first, then scale or calculate bars as needed.
Problems and edge cases
Non-integer ratios appear when pixel counts do not reduce cleanly. A 1366×768 laptop screen reduces to 683:384, not 16:9. Displays advertised as 21:9 use actual ratios like 64:27 (2560×1080) or 43:18 (3440×1440), so 21:9 is a marketing approximation.2 OS scaling adds another layer: a MacBook Pro displays 1280×800 logical pixels on a 2560×1600 physical panel at 2x DPI. The physical ratio is 16:10 but the logical viewport is also 16:10, they match, so no distortion occurs. Conversely, fractional scaling on 3:2 Surface displays (125% or 150%) produces logical viewport sizes that do not simplify to neat ratios.
Non-standard ratios and marketing approximations
A 1366×768 laptop screen reduces to 683:384, not 16:9, because 1366 is not evenly divisible by 16. Displays advertised as 21:9 use actual ratios like 64:27 (2560×1080) or 43:18 (3440×1440), so 21:9 is a marketing approximation. These discrepancies matter when you are designing content that must fill the panel without any bars or distortion. The CapyToolkit calculator returns the exact GCD-reduced ratio for any width-height pair, so you can identify the true ratio rather than relying on the marketing label.
DPI scaling and logical versus physical pixel dimensions
OS scaling adds another layer: a MacBook Pro displays 1280×800 logical pixels on a 2560×1600 physical panel at 2x DPI. The physical ratio is 16:10 but the logical viewport is also 16:10, they match, so no distortion occurs. Conversely, fractional scaling on 3:2 Surface displays (125% or 150%) produces logical viewport sizes that do not simplify to neat ratios. Always verify panel specs from the manufacturer data sheet when exact dimensions matter for your project. The CapyToolkit calculator works with physical pixel dimensions, so you should enter the native panel resolution rather than the logical viewport size.
Common aspect ratio mistakes in web design
Web designers frequently assume all screens are 16:9, which leads to hero images and full-width banners that look cropped or letterboxed on 4:3 tablets and 3:2 laptops. A 1920×1080 hero image displayed at full width on a 1024×768 4:3 display scales down to 1024×576, cropping 25% of the height. Using CSS object-fit: cover prevents distortion but may cut off important content at the edges. The safer approach is to design for the smallest expected viewport and use object-position to control which part of the image survives the crop.
Hard-coded pixel dimensions break responsive layouts
Another common mistake is hard-coding pixel dimensions for video embeds. A 16:9 video embed at 1920×1080 overflows its container on 4:3 screens. Use the aspect-ratio: 16/9 CSS property with width: 100% and height: auto to maintain the ratio at any container width.3 The CapyToolkit calculator helps you plan these responsive breakpoints by showing the exact pixel dimensions at each target ratio. Designers who verify their breakpoints against the calculator produce layouts that adapt cleanly to 16:9, 16:10, and 4:3 viewports without unexpected cropping or overflow.
Designing for the smallest expected viewport first
The safer approach is to design for the smallest expected viewport and use object-position to control which part of the image survives the crop. For a hero banner that must work on both 16:9 desktop and 4:3 tablet, design at the 4:3 size first and verify that the composition still works when cropped to 16:9. This mobile-first approach ensures that critical content sits within the intersection of all target viewports, which means it remains visible regardless of the display aspect ratio. The CapyToolkit calculator shows the exact intersection dimensions for any pair of aspect ratios.
Using the calculator for game development and UI design
Game developers must design UI layouts that work across multiple aspect ratios. A HUD element anchored to the top-right corner of a 1920×1080 screen sits at coordinates (1720, 20). On a 2560×1080 21:9 display, that same element at the same normalized position (0.9, 0.02) sits at (2304, 22), which is still in the corner. But if the element is designed at a fixed pixel offset from the corner (200 pixels from the right edge), it sits at (1720, 20) on 16:9 and at (2360, 20) on 21:9, which is fine. The problem arises when the element is designed for a specific width and the 21:9 display shows more horizontal space that the UI does not account for. Unity4 and Unreal Engine both offer anchor-based UI systems5 that position elements relative to screen edges rather than absolute pixels, which solves this problem.
The CapyToolkit calculator shows the exact pixel coordinates at each ratio, letting you verify that your UI elements remain within the visible area across all target aspect ratios. Game developers who test their UI at multiple ratios in the calculator before shipping avoid the costly post-launch patches that result from elements drifting off-screen or overlapping critical content on non-standard displays.
Use this calculator when you need to scale an image or video to a new size without distortion, when you want to calculate exact letterbox bar dimensions for a specific display, or when you need to confirm whether two resolutions share the same aspect ratio.
Exporting a 1920×1080 video for a 3440×1440 ultrawide display
The calculator shows 440-pixel pillar bars on each side (`3440 - 2560 = 880` total, 440 per side). Position HUD overlays and subtitles inside the 2560-pixel-wide safe zone.
Scaling a 3840×2560 (3:2) photo to a 1920×1080 (16:9) YouTube thumbnail
At 1920 pixels wide, the 3:2 crop is 1920×1280, but the target is 1920×1080. Crop 200 pixels (100 top, 100 bottom) for a clean 16:9 thumbnail without black bars.
- 1.
"16:9 aspect ratio," Wikipedia, accessed June 2026. https://en.wikipedia.org/wiki/16:9_aspect_ratio
- 2.
"Rec. 709," Wikipedia, accessed June 2026. https://en.wikipedia.org/wiki/Rec._709
- 3.
Mozilla Developer Network, "aspect-ratio CSS property," developer.mozilla.org, accessed June 2026. https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/aspect-ratio
- 4.
Unity Technologies, "Basic Layout," docs.unity3d.com, accessed June 2026. https://docs.unity3d.com/Manual/UIBasicLayout.html
- 5.
Unity Technologies, "Designing UI for Multiple Resolutions," docs.unity3d.com, accessed June 2026. https://docs.unity3d.com/Manual/HOWTO-UIMultiResolution.html
An aspect ratio is the proportional relationship between a frame's width and its height, written as width:height. A 1920×1080 frame has an aspect ratio of 16:9 because both numbers divide by their GCD of 120 to give 16 and 9.
YouTube renders all public video in a 16:9 player. Uploads at other ratios receive black bars to fill the 16:9 player frame. Vertical videos at 9:16 receive side bars on desktop; YouTube Shorts display natively at 9:16 only in the Shorts player.
Determine the source width at the target display height by multiplying target height by the source ratio. Subtract from the target display width and divide by 2. For 1920×1080 on a 3440×1440 display: 1440 × 16/9 = 2560. Bar width = (3440 - 2560) / 2 = 440 pixels per side.
Yes. CapyToolkit runs entirely in the browser, including on iOS and Android. The input fields respond to numeric keyboards on mobile, and all calculations run locally without any network request.
Yes. The calculator accepts any positive integer width and height. If the ratio matches a known standard, it shows the common name. For ratios with no standard name, it shows the GCD-reduced fraction so you can compare it to standard ratios.
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.3 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.3 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.4
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.5 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.6 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.7 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.8
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.9 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.10 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.11 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).12 Twitter cards use 2:1 (1200 × 600).13 Apple
App Store screenshots have device-specific required dimensions.14 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.
Social Platform Crop Specs
- Facebook link preview ~1.91:1 (1200×630)
- Twitter card 2:1 (1200×600)
Enter your own source dimensions above and compare the simplified ratio against these platform specs.
- 1.
Eric W. Weisstein, "Greatest Common Divisor," mathworld.wolfram.com, accessed June 2026. https://mathworld.wolfram.com/GreatestCommonDivisor.html
- 2.
ITU, "BT.709: Parameter values for the HDTV standards for production and international programme exchange," itu.int, June 2015. https://www.itu.int/rec/R-REC-BT.709/en
- 3.
"16:9 aspect ratio," Wikipedia, accessed June 2026. https://en.wikipedia.org/wiki/16:9_aspect_ratio
- 4.
"21:9 aspect ratio," Wikipedia, accessed September 2026. https://en.wikipedia.org/wiki/21:9_aspect_ratio
- 5.
Allan Weitz, "Tips for Composing with Different-Format Cameras," bhphotovideo.com, May 2016. https://www.bhphotovideo.com/explora/photography/tips-and-solutions/tips-for-composing-with-different-format-cameras
- 6.
RTINGS, "What Is The Aspect Ratio?: How The Aspect Ratio Impacts Your Viewing Experience," rtings.com, December 2025. https://www.rtings.com/tv/learn/what-is-the-aspect-ratio-4-3-16-9-21-9
- 7.
Library of Congress, "High Efficiency Video Coding (HEVC) Family, H.265, MPEG-H Part 2," loc.gov, November 2020. https://www.loc.gov/preservation/digital/formats/fdd/fdd000530.shtml
- 8.
Chromium, "media/filters/h264_parser.cc," chromium.googlesource.com, accessed June 2026. https://chromium.googlesource.com/chromium/src/+/66c91e5046e5f7430e4f62593a1fe5d6dfe347de/media/filters/h264_parser.cc
- 9.
YouTube, "From epic edits to quick clips: Transitioning your long-form content to YouTube Shorts," blog.youtube, April 2025. https://blog.youtube/creator-and-artist-stories/transitioning-your-long-form-content-to-youtube-shorts/
- 10.
MDN, "image-set() CSS function," developer.mozilla.org, April 2026. https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/image/image-set
- 11.
MDN, "Using responsive images in HTML," developer.mozilla.org, accessed June 2026. https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images
- 12.
Meta for Developers, "Images in Link Shares," developers.facebook.com, accessed June 2026. https://developers.facebook.com/docs/sharing/webmasters/images/
- 13.
X Developers, "Twitter card summary_large_image," devcommunity.x.com, October 2020. https://devcommunity.x.com/t/twitter-card-summary-large-image/144086
- 14.
Apple Developer, "Screenshot specifications," developer.apple.com, accessed June 2026. https://developer.apple.com/help/app-store-connect/reference/app-information/screenshot-specifications