Aspect Ratio Calculator

About this tool

The Aspect Ratio Calculator answers the three questions people ask about image and video proportions. First, enter any width and height (for example 1920 × 1080) and it reduces the pair to the simplest ratio using the greatest common divisor (16:9), shows the decimal ratio (1.7778:1) and names the closest standard ratio, so an odd size like 1366 × 768 is flagged as roughly 16:9. Second, pick a ratio from the presets (16:9, 4:3, 1:1, 21:9, 9:16, 3:2, 4:5 and more) or type your own, then enter one known dimension: the missing width or height is calculated live as you type, in either direction, and rounded to the nearest pixel with the exact value shown when it is not a whole number. Common resolutions for the chosen ratio, such as 1280 × 720, 1920 × 1080 and 3840 × 2160 for 16:9, are listed and fill the solver with one tap. Third, it writes a CSS aspect-ratio rule with a live preview box and an optional padding-top fallback. Everything runs in your browser.

Why use it

• Simplifies any size to its ratio, such as 1920×1080 to 16:9, with the decimal ratio and nearest standard ratio.

• Solves the missing width or height from a ratio as you type, in both directions.

• Lists common resolutions for each ratio, from 1280×720 to 3840×2160 for 16:9.

• Generates CSS aspect-ratio code with an optional padding-top fallback.

• Free, instant and runs in your browser.

How to use

1. Enter a width and height in section 1 to see the simplified ratio, decimal ratio and closest standard ratio
2. In section 2, tap a preset such as 16:9 or 21:9, or type your own ratio width and height
3. Type the width you know to get the height, or type the height to get the width; the other field updates as you type
4. Tap a common resolution for the chosen ratio to fill the solver, or use Swap orientation to flip landscape and portrait
5. Use Copy ratio or Copy dimensions to copy the result
6. In section 3, tick the padding-top fallback if needed and click Copy CSS to copy the aspect-ratio rule

When it helps

• When embedding a YouTube or Vimeo player that must maintain 16:9 across all screen widths
• When building a square product image grid where cards must stay equal-width and equal-height
• When creating a vertical short-form video component at the 9:16 ratio for a reels section
• When designing a cinematic hero banner at 21:9 for a film or game promotional page
• When ensuring a map embed maintains its proportions regardless of the container width
• When building a responsive image placeholder that preserves layout space before the image loads

Tips

• Set width: 100% on the element alongside aspect-ratio to make a fully responsive box that scales to its container while maintaining proportions
• Combine aspect-ratio with object-fit: cover on images so they fill the defined ratio by cropping rather than distorting or leaving blank space
• 9:16 is the standard for mobile-first vertical video — use it for TikTok-style embeds, stories, and reel components in your layout
• 21:9 cinematic ratio works well for hero banners because it is wide enough to display immersive imagery while remaining shallow enough to leave viewport space for content below
• For older browser support (pre-2021 Safari), use aspect-ratio as enhancement and test with the padding-bottom fallback; but for most modern web projects, aspect-ratio alone is sufficient

Frequently Asked Questions

Glossary

Aspect Ratio

The proportional relationship between an element's width and height, expressed as width / height. The CSS aspect-ratio property enforces this relationship automatically when only one dimension is constrained.

Intrinsic Size

The natural width and height of a replaced element (like an image or video) determined by its content rather than CSS rules. aspect-ratio interacts with intrinsic size to resolve final dimensions.

Padding Hack

A legacy technique for maintaining aspect ratios by setting padding-top or padding-bottom to a percentage of width on a zero-height element, exploiting CSS's percentage-padding calculation from parent width.

Object Fit

A CSS property for replaced elements (img, video) that controls how content fills its container. object-fit: cover scales to fill, cropping excess; object-fit: contain scales to fit, leaving empty space.

Responsive Media

Media elements — images, videos, iframes — that scale fluidly with their containers rather than using fixed pixel dimensions. Achieved by combining width: 100%, max-width, and aspect-ratio.

Cinemascope

An ultrawide aspect ratio of approximately 21:9 or 2.39:1 originally from film production. Used in web design for cinematic hero banners and immersive full-width background video.