Aspect Ratio Calculator

Aspect ratio is the proportional relationship between width and height. Common ratios: 16:9 (widescreen video), 4:3 (classic TV), 1:1 (square), 3:2 (photography). CSS aspect-ratio property maintains this proportion automatically: aspect-ratio: 16/9.

Modern CSS: use the aspect-ratio property directly — aspect-ratio: 16/9. Legacy method: padding-bottom percentage trick — padding-bottom: 56.25% (which is 9/16 × 100) on a container with height: 0. The modern property has full browser support since 2021.

Match the image's natural ratio to prevent distortion. Common web ratios: 16:9 for hero images and video, 3:2 for blog thumbnails, 1:1 for avatars and product images, 4:5 for portrait/social posts. Set aspect-ratio on the container and use object-fit: cover on the image.

Divide both width and height by their greatest common divisor (GCD). For 1920×1080: GCD is 120, so 1920/120 : 1080/120 = 16:9. This tool calculates the ratio instantly from any pixel dimensions and shows the equivalent CSS aspect-ratio value.