Aspect Ratio Calculator

Calculate the missing dimension (width or height) from an aspect ratio, or find the aspect ratio from given dimensions. Includes common presets for video (16:9, 4:3, 21:9, 9:16), social media (1:1, 4:5), and photography (3:2).

For video work: 16:9 is the standard for YouTube, HD, and 4K. 9:16 is used for TikTok, Instagram Reels, and YouTube Shorts. 4:3 is legacy TV and some presentation formats. 21:9 is ultrawide cinema.

For web design: use the CSS aspect-ratio property to maintain proportions responsively. For example, aspect-ratio: 16 / 9 on a container will keep it widescreen at any width. This eliminates the old padding-top hack and is supported in all modern browsers since 2021.

For social media: Instagram feed posts use 1:1 (square) or 4:5 (portrait). Twitter/X cards use 2:1. LinkedIn posts use 1.91:1.

Understanding aspect ratios is fundamental to visual design. An aspect ratio expresses the proportional relationship between width and height as two numbers separated by a colon. The first number represents width and the second represents height, regardless of the actual pixel dimensions. For example, a 16:9 image could be 1920x1080, 1280x720, or 640x360 — all share the same proportions.

When resizing images or videos, maintaining the correct aspect ratio prevents distortion. Stretching an image to fill a different ratio causes it to look squashed or stretched. The three strategies for fitting content into a different aspect ratio are: letterboxing (adding black bars), cropping (removing content from edges), and scaling (maintaining ratio within the bounds).

Common use cases include calculating YouTube thumbnail dimensions (1280x720 for 16:9), determining the correct image size for social media posts, designing responsive containers that maintain proportions across screen sizes, and converting between different resolution tiers while maintaining the same ratio (e.g., 1080p to 720p to 480p).

The CSS aspect-ratio property simplifies responsive design significantly. Before its introduction, developers used the padding-top hack, where a percentage-based padding-top created the correct proportions because percentage padding is calculated relative to the element width. Now, a single CSS declaration handles this natively.

For photography, common aspect ratios include 3:2 (standard DSLR), 4:3 (micro four thirds and many phone cameras), and 1:1 (medium format and square crops). Understanding these ratios helps when cropping and printing photos to standard frame sizes like 4x6 (3:2), 5x7 (7:5), and 8x10 (5:4).

When working with responsive images, you can use the aspect-ratio property alongside object-fit to ensure images fill their containers without distortion. Set the container to the desired aspect ratio, then apply object-fit: cover to the image to fill the space while maintaining its natural proportions.