Aspect Ratio & Dimension Calculator

Calculate proportional width and height dimensions for 16:9, 9:16, 4:3, 1:1, and 21:9 screen resolutions.

Category: Design

How to Use Aspect Ratio & Dimension Calculator

  1. Enter your Original Width and Original Height in pixels (e.g., 1920 and 1080).
  2. Optionally enter either a New Width or a New Height to calculate the proportional companion dimension.
  3. View the simplified integer ratio (e.g., 16:9), decimal ratio (1.78:1), and scaled pixel dimensions.
  4. Copy the generated CSS aspect-ratio declaration or fallback padding-top percentage.

Related Design Tools

  • Image Resizer

    Resize photos to exact dimensions or percentage scale while keeping aspect ratio locked.

  • Crop Image

    Crop photos to standard aspect ratios including 1:1 square, 16:9 widescreen, and 4:3.

  • Social Media Image & Video Size Guide

    Look up up-to-date image dimensions, video resolutions, and aspect ratios for Instagram, YouTube, Twitter, and LinkedIn.

  • CSS Box Shadow & Glow Generator

    Visually design CSS box-shadows, soft elevations, and neon glows with instant CSS and Tailwind class output.

  • Glassmorphism & Frosted Glass Generator

    Design frosted glass cards with CSS backdrop-filter blur, translucent borders, and light/dark theme styling.

Frequently Asked Questions

How does the aspect ratio calculator simplify pixel dimensions like 1920x1080?

The calculator divides both the original width and height by their Greatest Common Divisor (GCD) using the Euclidean algorithm. For 1920 and 1080, the GCD is 120, which simplifies 1920÷120 = 16 and 1080÷120 = 9, yielding a 16:9 aspect ratio.

How do I calculate a proportional new height from a target width (or vice versa)?

Enter your original width and height (for example, 1920 and 1080), then type either a Target Width or a Target Height. If you enter a Target Width of 1280, the calculator multiplies 1280 × (1080 / 1920) = 720. If you enter a Target Height instead, it scales the width proportionally.

What are the most common video and display aspect ratios?

Standard widescreen HD, Full HD (1920×1080), QHD (2560×1440), and 4K UHD (3840×2160) displays use 16:9. Vertical mobile video (Reels, Shorts, TikTok) uses 9:16 (1080×1920). Classic monitors and iPads use 4:3, DSLR photography uses 3:2, and ultrawide monitors use 21:9.

When should I use the CSS aspect-ratio property versus the padding-top percentage hack?

Modern browsers support the native CSS property 'aspect-ratio: 16 / 9;', which is clean and prevents Cumulative Layout Shift (CLS). For legacy browsers or responsive iframe wrappers, the padding-top percentage trick (height ÷ width × 100%, such as 56.25% for 16:9) remains a reliable fallback.

What happens if an unusual resolution does not simplify to a small integer ratio?

If a resolution like 1366×768 is entered, its exact mathematical GCD ratio is 683:384, and its decimal ratio is 1.78:1 (closely approximating 16:9 = 1.7778:1). The calculator outputs both the exact reduced integer ratio and the decimal multiplier so you can compare both.