Aspect Ratio Calculator - Resize Width, Height & CSS Ratio

This Aspect Ratio Calculator locks a width-to-height ratio and computes the missing dimension from either side. Enter a ratio like 16:9, type width or height in pixels, and get the paired value, simplified ratio, decimal form, and copy-ready CSS aspect-ratio property instantly.

Dimensions

16:9

Simplified ratio

16:9

Exact dimensions1920 × 1080 px
Decimal ratio (W ÷ H)1.7778
CSS aspect-ratio16 / 9

How aspect ratio math works

An aspect ratio describes proportional width to height as W:H. To find height from width, multiply width by H/W. For 16:9 at 1600 px wide: height = 1600 × (9 ÷ 16) = 900 px. To simplify any pair, divide both dimensions by their GCD - 1600:900 becomes 16:9 after dividing by 100.

Preset landing pages cover the most searched ratios: 16:9, 4:5, 9:16, 2:3, 1.91:1, and 2:1. Share any preset with query params, e.g. ?preset=4-5&width=1080.

Aspect Ratio FAQ

How do I calculate aspect ratio from width and height?

Divide width by height for the decimal ratio, then simplify with the greatest common divisor (GCD). For example, 1920 × 1080 px gives 1920 ÷ 1080 = 1.777…, which simplifies to 16:9 because GCD(1920, 1080) = 120. This tool performs both steps automatically and outputs CSS-ready aspect-ratio: 16 / 9.

How do I resize an image while keeping aspect ratio?

Pick your target ratio (such as 16:9 for video), enter either the desired width or height, and let the calculator compute the other dimension. If you lock width at 1920 px on a 16:9 ratio, height becomes 1080 px. Use the same math for CSS max-width layouts, thumbnail pipelines, and export presets in design tools.

What is the aspect ratio of 1920×1080?

1920×1080 is the classic Full HD frame. Its simplified ratio is 16:9 - the widescreen standard for YouTube, streaming platforms, and most modern monitors. The decimal form is approximately 1.7778. Both 1280×720 (HD) and 3840×2160 (4K UHD) share the same 16:9 ratio at different pixel counts.

What is CSS aspect-ratio and how do I use it?

The CSS aspect-ratio property reserves space before media loads, preventing layout shift. Set aspect-ratio: 16 / 9 on a container and give it a width; the browser calculates height automatically. This calculator outputs the simplified fraction (e.g., 16 / 9) so you can paste it directly into stylesheets or Tailwind arbitrary values.

Aspect ratio calculator vs Photoshop crop tool: which should I use?

Photoshop and Figma crop tools are best when you are editing a specific asset inside a design app. This calculator is faster when you need exact pixel dimensions, batch-export specs, or CSS values without opening design software - especially for responsive embeds, video players, and programmatic thumbnail generation.

What are common aspect ratios for video and social media?

16:9 is standard for YouTube and landscape video. 9:16 suits TikTok, Reels, and Stories. 4:5 is the Instagram portrait feed format (1080×1350). 1:1 works for square Instagram posts. 2:3 fits Pinterest pins. 1.91:1 is the Facebook and LinkedIn link preview ratio. 2:1 suits X post images. Use the Social media presets in the tool or share a link with ?preset= and width query params.

Can I share a link with my aspect ratio settings?

Yes. Adjust the ratio, width, or height and click Copy link - the URL updates with query parameters such as ?preset=4-5&width=1080 or ?ratio=16:9&width=1920. Anyone opening that link loads the calculator with the same preset and dimensions. Height-lock links include lock=height when you edit height instead of width.

Sources & review

Last reviewed:

Related Dev Tools

Calculator hubs

Related guides