Aspect Ratio Calculator

Calculate, convert, and scale dimensions with precision. This tool handles three core functions: finding aspect ratios from existing dimensions, calculating missing width or height values, and scaling dimensions by percentage.

Key Features

• Ratio Detection - Enter width and height to get the simplified aspect ratio

• Dimension Calculator - Input one dimension and select a ratio to find the missing value

• Custom Ratios - Support for non-standard ratios like 5:4 or 1.85:1

• Visual Preview - Real-time rectangle showing actual proportions

• Percentage Scaling - Scale up or down by any percentage

• Multiple Units - Works with pixels, inches, centimeters, millimeters, and points

• Quick Actions - Swap dimensions instantly with one click

Common Use Cases

Perfect for designers, developers, and content creators who need precise measurements. Calculate screen resolutions. Resize images proportionally. Plan print layouts. Convert between different aspect ratios.

The calculator includes presets for standard ratios: 16:9 widescreen, 4:3 traditional, 1:1 square, 3:4 portrait, golden ratio, and 21:9 ultrawide.

Technical Details

Built with vanilla HTML, CSS, and JavaScript. Zero dependencies. All functions and classes use unique prefixes (arc- and ARC_) to prevent conflicts when embedded in existing websites.

Input validation prevents errors. Security measures block malicious input. Responsive design works on all devices.

Ready to embed - just include the HTML and link the CSS/JS files from your assets folder.

What Is an Aspect Ratio Calculator?

An aspect ratio calculator is a tool that computes the proportional relationship between the width and height of a display, image, or video frame.

You input any 2 of 3 values (width, height, or ratio) and the tool solves for the third. The output comes back as a simplified ratio like 16:9, a decimal like 1.78:1, or a percentage, depending on which format you need.

The ratio itself is a dimensionless expression. A 1920x1080 frame and a 1280x720 frame are both 16:9 because they share the same proportional relationship, even though their pixel counts differ by 2.07 million pixels.

Aspect ratio notation is written as width:height. So 16:9 means for every 16 units of width, there are 9 units of height. The colon separates two integers reduced to their lowest whole-number form using the Greatest Common Divisor (GCD) method.

Common output formats from a ratio calculator:

• Simplified integer ratio (e.g., 16:9) for display specs and platform requirements
• Decimal ratio (e.g., 1.78:1) for cinema and broadcast technical docs
• Percentage (e.g., 56.25%) for the CSS padding-top method in responsive web design

The global video streaming market was valued at $554.33 billion in 2023 and is projected to reach $2,486.51 billion by 2032 (Fortune Business Insights). Every frame in that ecosystem depends on correct display ratio dimensions to render without distortion.

How Does an Aspect Ratio Calculator Work?

The calculator takes pixel dimensions as inputs and runs 2 operations: a GCD reduction to find the simplified ratio, and cross-multiplication to solve for a missing value.

Most people just want one of those two things. Either they need to know what ratio their dimensions produce, or they need to calculate a missing width or height to preserve the ratio when resizing.

How the GCD Method Simplifies Raw Pixel Dimensions

The formula: GCD(width, height) is calculated using the Euclidean algorithm, then both values are divided by that GCD.

Step-by-step with 1920x1080:

• GCD(1920, 1080) = 120
• 1920 / 120 = 16
• 1080 / 120 = 9
• Result: 16:9

The same process applied to 1280x720 produces an identical GCD of 80, which also simplifies to 16:9. Two different resolutions, same ratio. This is why resolution and aspect ratio are distinct concepts.

YouTube's default encoding pipeline processes every uploaded video through this exact resolution-to-ratio mapping before placing it in a 16:9 player container, adding letterboxes or pillarboxes where the source ratio doesn't match.

How Cross-Multiplication Solves for Missing Width or Height

Proportional scaling formula: New Width = (New Height / Original Height) x Original Width

If you have a 1920x1080 source and need to scale it to 720px height while keeping the ratio locked:

• 720 / 1080 = 0.6667 (scaling factor)
• 1920 x 0.6667 = 1280px new width

This is exactly what tools like Figma's constraint lock and Photoshop's chain icon do behind the scenes when you tick "Maintain Aspect Ratio" in the image size dialog. They run the same arithmetic, just without showing you the steps.

Input Values Given	Operation Used	What Gets Calculated
Width + Height	GCD reduction	Simplified ratio (e.g., 16:9)
Width + Ratio	Cross-multiplication	Missing height
Height + Ratio	Cross-multiplication	Missing width

What Are the Most Common Aspect Ratios?

7 ratios cover the vast majority of use cases across video, photography, and social media. Each one emerged from a specific technical or platform context, not arbitrary preference.

In 2024, around 60% of all smartphones had screens with a 16:9 aspect ratio, making it the single most widely distributed display format globally (Reelnreel).

Ratio	Decimal	Primary Use	Example Resolution
16:9	1.78:1	HD/4K video, YouTube, monitors	1920x1080
9:16	0.56:1	TikTok, Reels, Stories	1080x1920
4:3	1.33:1	Legacy TV, some print formats	1440x1080
1:1	1.00:1	Instagram square, profile images	1080x1080
4:5	0.80:1	Instagram portrait, Facebook feed	1080x1350
3:2	1.50:1	DSLR/mirrorless, 35mm film	6000x4000
21:9	2.33:1	Ultrawide cinema, gaming monitors	2560x1080

Instagram updated its grid to a 3:4 aspect ratio in January 2025, replacing the legacy 1:1 square grid. Portrait-format posts at 4:5 now consistently outperform square posts in reach and engagement on the platform (Buffer, 2025).

The 9:16 vertical format is expanding fast. An estimated 81% of users primarily watch short-form video content in vertical format on their smartphones (Vidico/New Target, 2024), which is why platforms like TikTok and YouTube Shorts default to this ratio.

What Is Aspect Ratio Used For?

Aspect ratio is a required specification in 4 major professional domains: video production, web and UI design, photography, and social media content. Getting it wrong in any of these contexts produces visible output errors.

Aspect Ratio in Video and Film Production

Primary use: Setting sequence dimensions before shooting or editing begins.

Adobe Premiere Pro and DaVinci Resolve both require you to define a sequence ratio upfront. Footage shot at a different ratio than the sequence creates automatic letterboxing or pillarboxing in the timeline.

• Broadcast TV and YouTube: 16:9
• Cinema flat widescreen: 1.85:1
• Anamorphic cinema: 2.39:1
• IMAX: 1.43:1 or 1.90:1 depending on format

The video streaming market's projected CAGR of 17.8% through 2032 (Fortune Business Insights) means more content formats, more platforms, and more ratio calculation requirements for production teams.

Aspect Ratio in Web Design and UI Layouts

The CSS aspect-ratio property became widely available across all major browsers as of September 2021 (Chrome 89, Firefox 90, Safari 15). Before that, developers relied on the padding-top hack.

Key difference: The old padding-top method required a parent wrapper and a position:absolute child. The aspect-ratio property does it in a single line.

Responsive container sizing, embed wrappers for video players, and image grids all depend on locked ratio dimensions. A 16:9 video embed using aspect-ratio: 16 / 9 scales correctly at any viewport width without extra calculations.

Aspect Ratio in Social Media Image Sizing

Every major platform enforces its own ratio requirements. Upload the wrong dimensions and the platform auto-crops, often cutting the focal point of the image.

Current platform requirements (2025):

• Instagram feed portrait: 4:5 (1080x1350px), now the recommended default
• Instagram/TikTok Reels and Stories: 9:16 (1080x1920px)
• X (Twitter) in-feed images: 16:9, standardized in late 2024
• LinkedIn feed posts: 1.91:1 for articles, 1:1 for standard posts
• Facebook link previews: 1.91:1

Vertical, mobile-first ratios like 4:5 and 9:16 now outperform square images on most networks (Buffer, 2025). A single square export no longer works across all platforms without cropping.

How Do You Calculate Aspect Ratio Without a Calculator?

The manual method uses 3 steps: divide, find the GCD, then reduce both values.

Took me a while to remember the Euclidean algorithm clearly enough to use it fast. The short version: divide the larger number by the smaller, take the remainder, repeat until the remainder is zero. The last non-zero divisor is your GCD.

Worked example with 1280x720:

• Step 1: GCD(1280, 720). 1280 / 720 = 1 remainder 560
• Step 2: 720 / 560 = 1 remainder 160
• Step 3: 560 / 160 = 3 remainder 80
• Step 4: 160 / 80 = 2 remainder 0. GCD = 80
• Step 5: 1280 / 80 = 16, 720 / 80 = 9. Result: 16:9

This approach works fine for standard HD dimensions. For odd sensor outputs (like 6000x4000 from a Canon R5), the GCD lands at 2000, simplifying to 3:2, which is correct for most mirrorless cameras.

The calculator is faster for anything non-standard. Manual math makes sense when you want to verify a result or you're on a shoot without browser access.

How Do You Maintain Aspect Ratio When Resizing?

Maintaining aspect ratio means keeping the proportional relationship fixed while changing the pixel dimensions. There are 2 scenarios: resizing in a design tool, and resizing programmatically for output delivery.

Proportional Resizing Formula

New Width = (New Height / Original Height) x Original Width

New Height = (New Width / Original Width) x Original Height

One value anchors the resize. The other is calculated. Canva's resize tool uses this exact method when you enter a target width and let it calculate the height automatically. Same with Figma when the constraint lock is active.

Pixel rounding is a real issue at small dimensions. At 100px wide for a 16:9 container, the calculated height is 56.25px. Most tools round to 56px, creating a 1px deviation. That doesn't matter on screen. It matters in print at high DPI.

Maintaining Aspect Ratio in CSS with the aspect-ratio Property

The modern approach is one line:

aspect-ratio: 16 / 9;

Set width: 100% on the element, leave height unset, and the browser calculates the correct height automatically at any viewport size.

Legacy padding-top method (still relevant for older browser support):

• Parent: position: relative; padding-top: 56.25% (for 16:9)
• Child: position: absolute; top: 0; left: 0; width: 100%; height: 100%

The 56.25% figure comes from 9/16 = 0.5625. For 4:3, it's 75%. For 1:1, it's 100%. These percentages are what aspect ratio calculators produce when you select "percentage output" mode.

What happens when ratio is not maintained: stretching distortion for non-uniform scaling, pillarboxing when narrow content fills a wide container, and letterboxing when wide content fills a narrow container.

What Is the Difference Between Aspect Ratio and Resolution?

Aspect ratio is the proportional relationship. Resolution is the total pixel count. They are related but not the same, and confusing the two causes resizing errors.

x1080 and 1280x720 are different resolutions with the same 16:9 ratio. 1920x1080 and 1920x1440 are the same width but different ratios (16:9 vs 4:3).

Concept	Definition	Example
Aspect Ratio	Proportional width-to-height relationship	16:9
Resolution	Total pixel count (width x height)	1920x1080 = 2,073,600px
PPI	Pixel density per physical inch	96 PPI (standard monitor)

PPI (pixels per inch) is a third distinct concept. It measures print or screen density, not proportions. A 300 PPI print and a 72 PPI screen version of the same image can share identical aspect ratios despite completely different physical output quality.

Practical example: Upscaling a 4:3 video (1440x1080) into a 16:9 frame (1920x1080) without cropping adds pillarboxes. The resolution changes. The source ratio doesn't. YouTube handles this automatically when you upload 4:3 footage to a 16:9 channel.

Changing resolution does not preserve ratio automatically. If you resize a 1920x1080 image to 1000px wide in Photoshop without locking proportions, the height stays at 1080px and the ratio breaks to roughly 0.93:1. That's why the graphic design terms "constrain proportions" and "lock aspect ratio" refer to the same action: preventing that exact mistake.

How Does Aspect Ratio Affect Video Quality and Display?

A ratio mismatch between source content and the display container produces one of 3 visible results: letterboxing, pillarboxing, or anamorphic stretch distortion.

None of them are wrong by default. Letterboxing preserves the original frame composition. Stretch distortion always is wrong. The choice between adding black bars and cropping depends on whether the composition or the screen fill matters more.

Letterboxing and Pillarboxing

Letterboxing: horizontal black bars top and bottom, used when wide content (e.g., 2.39:1 film) plays inside a narrower container (16:9 screen).

Pillarboxing: vertical black bars on both sides, used when narrow content (e.g., 4:3 archive footage) plays inside a wider container (16:9 display).

Both techniques preserve the original frame dimensions and prevent distortion. The alternative (stretching) changes the width-to-height relationship and produces visible deformation of faces, circles, and text.

Most IP cameras capture natively in 4:3 at resolutions like 1280x960. Feeding that footage directly into a 16:9 web player without server-side handling produces pillarboxing automatically (Ant Media, 2026).

Platform Encoding and Ratio Containers

YouTube, Vimeo, and Netflix each encode to fixed ratio containers regardless of what you upload.

• YouTube places all uploads inside a 16:9 player. Vertical 9:16 uploads appear with grey sidebars on desktop
• Netflix encodes to the source ratio but delivers inside a 16:9 UI shell on TV apps
• TikTok crops non-9:16 uploads automatically, often removing the top and bottom

Christopher Nolan's Oppenheimer (2023) used 5 distinct aspect ratios in a single film, shifting between 2.39:1 standard widescreen and 1.43:1 IMAX depending on scene perspective. Each ratio required separate technical specs during post-production and different display containers per venue type.

Anamorphic Stretch Distortion

Stretch distortion happens when a player or display forces a source frame into a container with a different ratio without adding black bars.

Common causes: wrong sequence settings in Premiere Pro, incorrect display output settings on a projector, or a platform that auto-resizes without respecting the source ratio.

Circles become ovals. Text appears squashed or elongated. Human faces are the most visible indicator. Stretch distortion on a 4:3 source expanded to 16:9 makes people appear 33% wider than they actually are.

What Aspect Ratio Do Major Platforms Require?

Platform requirements change. Instagram updated its grid to 3:4 in January 2025. X standardized in-feed images to 16:9 in late 2024. A single master export no longer works across all platforms without cropping.

Vertical, mobile-first ratios like 4:5 and 9:16 now outperform square images on most networks (Buffer, 2025). The spread from 1.91:1 (Facebook link previews) to 9:16 (TikTok) means any single export loses critical content somewhere.

Platform	Feed / Primary	Stories / Shorts	Video Standard
YouTube	16:9	9:16 (Shorts)	16:9
Instagram	4:5 (recommended)	9:16	9:16 (Reels)
TikTok	9:16	9:16	9:16
Facebook	1.91:1 (links)	9:16	4:5 (feed video)
X (Twitter)	16:9	16:9	16:9
LinkedIn	1.91:1 (articles)	n/a	1:1 or 16:9

Instagram officially recommends 4:5 portrait feed posts at 1080x1350px over the legacy 1:1 square because portrait images occupy roughly a third more screen on mobile (Buffer, 2025). If you're still designing square-first for Instagram, you're behind the platform's own guidelines.

A practical workflow: design at 4:5 first, then export a 1:1 crop and a 9:16 crop. Those 3 exports cover Instagram feed, square fallback, and Stories without rebuilding anything.

How Is Aspect Ratio Calculated in CSS?

CSS has 2 methods for locking aspect ratio on elements: the modern aspect-ratio property (supported since September 2021 across Chrome, Firefox, and Safari), and the legacy padding-top hack that predates it.

The aspect-ratio property became "Baseline Widely Available" according to MDN, meaning it works reliably across all modern browsers without fallbacks for the overwhelming majority of users.

The Modern aspect-ratio Property

Syntax: aspect-ratio: 16 / 9;

Set width to 100% and leave height unset. The browser calculates height automatically.

• Works on any HTML element, not just media
• Accepts integer ratios (16 / 9) or decimals (1.78)
• Combines with object-fit: cover to prevent image distortion inside fixed-ratio containers

SitePoint notes the property eliminates the need for complex CSS hacks and ensures more predictable behavior across screen sizes, cutting both development time and cross-browser testing work.

The Legacy Padding-Top Method

Still relevant for projects supporting browsers older than Chrome 88 or Safari 15.

Calculation: padding-top percentage = (height / width) x 100

• 16:9 = (9 / 16) x 100 = 56.25%
• 4:3 = (3 / 4) x 100 = 75%
• 1:1 = 100%

The parent element gets position: relative and the padding-top value. The child gets position: absolute; top: 0; left: 0; width: 100%; height: 100%.

The padding-top percentage is exactly what a ratio calculator produces when you select "percentage output" mode. That's a direct use case: calculate the ratio first, paste the percentage directly into CSS.

What Tools and Software Use Aspect Ratio Calculators?

Ratio calculation is built into every major design and video tool. The standalone web calculator exists for cases where you're outside those environments or need to verify numbers before setting up a project.

The 2024 UX Tools Design Tools Survey found that 80%+ of professional UI designers use Figma as their primary tool. Figma's constraint lock runs proportional scaling calculations every time you resize with it active.

Tool	Ratio Feature	Where to Find It
Figma	Constraint lock	Right panel, resize handles
Adobe Photoshop	Chain icon in Image Size dialog	Image > Image Size
Canva	Resize tool with ratio lock	File > Resize
Adobe Premiere Pro	Sequence settings	Sequence > Sequence Settings
DaVinci Resolve	Timeline format	Project Settings > Master Settings
HandBrake	Anamorphic / crop settings	Dimensions tab

For browser-based work, Andrew Hedges' aspect ratio calculator and Calculator.net are the most referenced standalone tools among developers. Both accept 2 of 3 inputs and solve for the third.

Google Sheets handles it too. A GCD formula in a spreadsheet solves the same problem: =A1/GCD(A1,B1)&":"&B1/GCD(A1,B1) where A1 is width and B1 is height. Useful when processing a batch of image dimensions from a CMS export.

What Are Non-Standard and Cinematic Aspect Ratios?

Cinema uses ratios that exist outside the standard digital set. They were developed for specific projection formats, anamorphic lenses, and immersive screen sizes, not for monitors or mobile devices.

Christopher Nolan used 5 distinct aspect ratios within a single film in Oppenheimer (2023), switching between 2.39:1 standard widescreen and 1.43:1 IMAX to distinguish between objective historical scenes and subjective perspective shots.

The 2 Standard Cinema Formats

1.85:1 (flat widescreen): The Hollywood standard for decades. Slightly wider than 16:9, so content shot in 1.85:1 displays with thin black bars on a widescreen monitor. Films like Parasite and Moonlight used this ratio. Two-shot dialogue scenes frame particularly well at 1.85:1.

2.39:1 (anamorphic widescreen): The widest ratio in common modern cinema use. Requires anamorphic lenses that squeeze a wide image onto standard 35mm film during capture, then unsqueeze during projection. Films like Dune (2021) and Mad Max: Fury Road used this format for epic horizontal compositions.

IMAX and Extreme Formats

IMAX runs counter to the widescreen trend. It goes taller, not wider.

• 1.43:1 (70mm IMAX): the original IMAX format using film running horizontally with 15 perforations per frame, producing roughly 6x the resolution of standard 35mm
• 1.90:1 (Digital IMAX): used in most modern digital IMAX screens
• 2.76:1 (Ultra Panavision 70): used in The Hateful Eight (2015) and Ben-Hur (1959). Twice the width of standard 35mm

The average IMAX screen is approximately 72 x 50 feet (22m x 16m), significantly larger than a traditional movie screen of roughly 50 x 20 feet (No Film School). At that physical size, the taller 1.43:1 ratio fills more of the vertical field of view than any widescreen format could.

Non-Standard Photographic Ratios

Medium format film cameras use physical frame sizes that produce ratios outside the standard digital set.

Most DSLRs and full-frame mirrorless cameras maintain a 3:2 aspect ratio, matching the 36mm x 24mm dimensions of 35mm film. Canon DSLRs, Sony Alpha series, and Nikon Z cameras all default to 3:2.

Medium format roll film ratios, determined by the physical gate size:

• 6x4.5cm: approximately 4:3
• 6x6cm: 1:1 square
• 6x7cm: approximately 7:6
• 6x9cm: 3:2, matching 35mm

Smartphone cameras default to 4:3 (iPhone, Samsung Galaxy, Google Pixel all shoot 4:3 natively). Switching to 16:9 or 1:1 inside the camera app crops the sensor and reduces the total megapixel count captured. For maximum image quality and flexibility in post, leaving the scale and proportion decisions to editing software later is the better workflow, as covered in standard graphic design principles.

FAQ on Aspect Ratio Calculators

What is an aspect ratio calculator?

An aspect ratio calculator computes the proportional relationship between width and height. Enter any two values and it solves for the third. Output options include simplified ratios like 16:9, decimal ratios like 1.78:1, or a percentage for CSS use.

How do I calculate aspect ratio from pixel dimensions?

Divide width by height to get the decimal ratio. Then find the Greatest Common Divisor (GCD) of both values using the Euclidean algorithm and divide each by it. 1920 divided by 1080 simplifies to 16:9 using a GCD of 120.

What is the most common aspect ratio?

16:9 is the dominant display ratio for HD video, YouTube, monitors, and broadcast TV. Around 60% of smartphones shipped with a 16:9 screen in 2024. The 9:16 vertical format is growing fast on TikTok, Reels, and YouTube Shorts.

What aspect ratio should I use for Instagram?

Instagram recommends 4:5 portrait for feed posts at 1080x1350px. Stories and Reels use 9:16 at 1080x1920px. Since January 2025, the Instagram profile grid displays all posts in a 3:4 vertical crop, making portrait-first design the better default.

What is the difference between aspect ratio and resolution?

Aspect ratio is the proportional relationship between width and height. Resolution is the total pixel count. Both 1920x1080 and 1280x720 share the same 16:9 ratio but have different pixel dimensions. Changing resolution does not automatically preserve the ratio.

How do I maintain aspect ratio when resizing an image?

Use the proportional scaling formula: New Width = (New Height / Original Height) x Original Width. In Figma, lock the constraint. In Photoshop, activate the chain icon in the Image Size dialog. In CSS, use aspect-ratio: 16 / 9 with width: 100%.

What causes letterboxing and pillarboxing?

Both result from a ratio mismatch between source content and the display container. Letterboxing adds black bars top and bottom when wide content plays on a narrower screen. Pillarboxing adds bars on the sides when narrow content fills a wider display.

What aspect ratio do YouTube videos need?

YouTube's standard video player uses 16:9. Upload at 1920x1080 for HD or 3840x2160 for 4K. YouTube Shorts require 9:16 at 1080x1920. Uploading a different ratio results in grey or black bars added automatically by the player.

How is aspect ratio used in CSS?

The aspect-ratio property sets width-to-height proportions directly: aspect-ratio: 16 / 9. Available across all major browsers since September 2021. For older browser support, use the padding-top hack: 56.25% for 16:9, calculated as (9/16) x 100.

What are the standard cinematic aspect ratios?

The 2 main cinema formats are 1.85:1 (flat widescreen, standard Hollywood) and 2.39:1 (anamorphic widescreen, used in epic productions like Dune). IMAX uses 1.43:1 or 1.90:1. Ultra Panavision 70 reaches 2.76:1, used in The Hateful Eight.