Aspect Ratio Calculator

Enter width and height to find the simplified aspect ratio, or choose a ratio preset and calculate the missing dimension. Useful for responsive design, video editing, and image cropping. All calculations run locally in your browser.

What aspect ratio means and when you need to calculate it

Aspect ratio is the proportional relationship between a rectangle's width and height, written as two numbers with a colon — 16:9, 4:3, 1:1. It describes the shape without specifying the size: a 1920×1080 image and a 1280×720 image have different dimensions but the same 16:9 ratio.

You need this whenever you scale content without distorting it: resizing an image for a new context, designing a video thumbnail, preparing ad dimensions, or working out the height a container needs to keep correct proportions in CSS.

How to use this tool

Find a ratio from known dimensions: enter width and height; the tool outputs the simplified ratio (1920×1080 → 16:9).
Calculate a missing dimension: choose a ratio preset (16:9, 4:3, 21:9, 1:1, or custom), enter the known dimension, and the tool calculates the other.
Copy the result into your image editor, CSS, or video settings.

To resize the actual image file to the calculated dimensions, use the Image Resizer, which supports aspect-ratio lock so entering one dimension fills in the other.

Common aspect ratios and their uses

16:9 — HD video, YouTube thumbnails, most monitors, presentation slides.
1:1 — Instagram square posts, profile images, square thumbnails.
9:16 — TikTok, Reels, YouTube Shorts, portrait mobile video.
21:9 — ultrawide monitors and cinematic video.
1.91:1 — Open Graph / social card images (1200×630 is the standard).
4:5 — Instagram portrait posts.

Aspect ratio in CSS

Modern CSS has a native aspect-ratio property: aspect-ratio: 16 / 9; on a container makes its height proportional to its width as the layout changes. It replaces the old padding-top hack (padding-top: 56.25% for 16:9) and is cleaner and more readable.

Frequently asked questions

What is the aspect ratio of a standard HD video?

16:9. It is the standard for HD (1280×720), Full HD (1920×1080), 2K (2560×1440), and 4K (3840×2160). YouTube, Vimeo, most streaming platforms, and TV use 16:9, so a thumbnail, embed container, or background for video is almost always 16:9.

How do I maintain aspect ratio when resizing in CSS?

Use the CSS aspect-ratio property, e.g. aspect-ratio: 16 / 9, and the browser sets the height proportionally as the width changes. For images, setting width and leaving height auto also preserves the ratio. The older method uses padding-top as a percentage (56.25% for 16:9).

What aspect ratio should I use for social media images?

It depends on the platform. Open Graph / link previews: 1.91:1 (1200×630). Instagram square: 1:1; portrait: 4:5. X/Twitter cards: 2:1 (1200×600). Reels and TikTok: 9:16. Always check current platform guidelines as they change periodically.

What is the difference between aspect ratio and resolution?

Resolution is the actual pixel count (1920×1080). Aspect ratio is the proportional relationship (1920×1080 simplifies to 16:9). Two images can share a ratio but have very different resolutions — and therefore different file sizes and sharpness.

Why does my image look stretched when I resize it?

Stretching happens when you change width and height independently without keeping the ratio. Lock the ratio first (the chain-link icon in Photoshop), or in CSS set only one dimension and let the other auto. This calculator gives you the correct locked dimension so you can set both fields explicitly.