OmniCalc

Aspect Ratio

Web & Dev

Calculate aspect ratio dimensions

Aspect ratio — the proportional relationship between an image or video's width and height — governs everything from how a photo crops on Instagram to how a video player letterboxes content that doesn't match the screen. Developers constantly need to either simplify a raw pixel dimension (like 1920×1080) into its named ratio (16:9), or solve for a missing dimension when resizing content to fit a target ratio without distortion.

Our aspect ratio calculator handles both directions. Enter a width and height to get the simplified ratio, using the greatest common divisor to reduce it to its smallest whole-number form. Or enter one dimension plus a target ratio to calculate the missing dimension — useful when you know you need a 1200px-wide image at 16:9 and need to know the exact height to specify.

This is essential for responsive image handling, video embed sizing, srcset generation, and any workflow where maintaining a consistent, non-distorted ratio across different asset sizes matters.

Why Aspect Ratio Matters

Aspect ratio calculations show up throughout front-end and media production work. Responsive image and video containers use the CSS aspect-ratio property or the classic "padding-bottom percentage hack" to reserve layout space before an asset loads, preventing cumulative layout shift (CLS) — a Core Web Vitals metric that directly affects search ranking. Getting the ratio wrong causes visible layout jank as images pop in, or distorted cropping when a fixed-ratio container doesn't match the source asset's actual proportions.

Video and image production workflows depend on aspect ratio just as heavily: a video shot in 16:9 needs specific crop calculations to become a 9:16 vertical short for social platforms, and a photographer delivering assets for both a 3:2 print and a 1:1 social thumbnail needs to know exactly how much of the frame survives each crop. Developers building image upload pipelines, responsive srcset breakpoints, or automated thumbnail generators need reliable aspect ratio math to avoid stretching or awkwardly cropping user-uploaded content.

The Aspect Ratio Formula, Explained

ratio = width ÷ gcd(width, height) : height ÷ gcd(width, height)

Where: width and height are the pixel dimensions of the image, video, or screen, and gcd (greatest common divisor) is the largest positive integer that divides both width and height evenly, calculated using the Euclidean algorithm.

Dividing both width and height by their GCD reduces the ratio to its simplest whole-number form — for example, 1920×1080 has a GCD of 120, so dividing both by 120 gives 16:9, the standard widescreen ratio. This is the same simplification process used to reduce any fraction to lowest terms.

To solve for a missing dimension given a target ratio, rearrange the proportion: if you know the width and the ratio W:H, then height = width × (H ÷ W). For example, to find the height of a 1600px-wide image at a 16:9 ratio: height = 1600 × (9 ÷ 16) = 900px.

How to Use the Aspect Ratio: Step by Step

  1. Choose your calculation mode

    Select "simplify" to find the ratio from known width and height, or "solve for dimension" if you know one dimension and a target ratio.

  2. Enter your known values

    For simplify mode, enter both width and height in pixels. For solve mode, enter one dimension (e.g., width) plus the target ratio (e.g., 16:9).

  3. Read the result

    The calculator returns the simplified ratio (e.g., 16:9) or the missing dimension in pixels, calculated to maintain the exact target proportion.

  4. Apply it to your asset or CSS

    Use the ratio in a CSS aspect-ratio property (aspect-ratio: 16 / 9;) or the calculated dimension when resizing or cropping the actual image or video file.

Aspect Ratio Examples: Real-World Scenarios

1

Identifying a Standard Screen Resolution's Ratio

A developer needs to confirm that a design mockup sized at 1920×1080 corresponds to the standard 16:9 widescreen ratio before setting up a CSS aspect-ratio container.

Width:1920px
Height:1080px

Calculation

gcd(1920, 1080) = 120 → 1920÷120 = 16, 1080÷120 = 9

Result

Simplified ratio: 16:9 — confirmed as the standard widescreen ratio, used in CSS as aspect-ratio: 16 / 9;

2

Sizing a YouTube Embed Container

A developer is building a responsive YouTube embed at 1280×720 and wants to verify the ratio matches the container's CSS before adding new video sources.

Width:1280px
Height:720px

Calculation

gcd(1280, 720) = 80 → 1280÷80 = 16, 720÷80 = 9

Result

Simplified ratio: 16:9 — matches the embed container, confirming no letterboxing will occur for standard widescreen source video.

3

Solving for Height Given a Target Ratio

A developer needs to generate a 1600px-wide thumbnail that must maintain a 16:9 ratio, and needs the exact height to pass to an image resizing API.

Width:1600px
Target ratio:16:9

Calculation

height = 1600 × (9 ÷ 16) = 900

Result

Required height: 900px — the resize API call becomes resize(1600, 900) to produce a non-distorted 16:9 thumbnail.

Common Mistakes to Avoid

  • Resizing width and height independently without preserving the ratio — this is the most common cause of stretched or squashed images; always calculate the missing dimension from the target ratio rather than guessing or rounding freehand.
  • Confusing ultrawide ratios with their simplified form — a 3440×1440 ultrawide monitor simplifies to 43:18, not the commonly cited "21:9" marketing label, which is an approximation; use the calculator's exact GCD-based result for precise layout math rather than marketing shorthand.
  • Forgetting that CSS aspect-ratio expects width/height order specifically — aspect-ratio: 9 / 16 produces a portrait container, while aspect-ratio: 16 / 9 produces landscape; swapping the order is a frequent copy-paste bug.

Tips & Tricks

  • For social media crops, memorize the common targets: 1:1 (Instagram square), 4:5 (Instagram portrait), 9:16 (Stories/Reels/TikTok/Shorts), and 16:9 (YouTube/landscape) — this calculator quickly gives you the exact crop dimensions from any source image size.
  • When building responsive image containers, pair the CSS aspect-ratio property with object-fit: cover to prevent distortion even if the actual uploaded image's ratio doesn't perfectly match the container's target ratio.

Aspect ratio math is simple once you have the greatest common divisor, but getting it wrong causes visible distortion, layout shift, or cropped content. Use this calculator when sizing responsive containers, generating image variants, or preparing video exports, and pair it with the Screen Resolution calculator to check pixel density on the final rendered assets.

Aspect Ratio — Frequently Asked Questions

Related Calculators

Screen Resolution Calculator

check pixel density for your target resolution

PX to REM Converter

convert your CSS layout units

Hex to RGB Converter

convert colors for your image and video assets

File Size Calculator

estimate image and video file sizes

Download Time Calculator

estimate load times for your media assets

Authoritative References

MDN Web Docs — CSS aspect-ratio property

developer.mozilla.org — Authoritative reference on implementing aspect ratio in CSS

web.dev — Optimize Cumulative Layout Shift

web.dev — Google guidance on using aspect ratio to prevent layout shift

External links open in a new tab. OmniCalc.us is not affiliated with these organisations.

Related Calculators

PX to REM

Web & Dev

Hex to RGB

Web & Dev

RGB to Hex

Web & Dev

Screen Resolution

Web & Dev

Download Time

Web & Dev

File Size

Web & Dev