CSS Aspect Ratio Calculator

An aspect ratio describes the proportional relationship between an element's width and height. It is written as two numbers separated by a colon, such as 16:9, and remains the same when both dimensions are scaled by an equal amount. Web developers use ratios to reserve stable space for images, videos, embeds, cards, and responsive components before their content finishes loading. This calculator reduces any pair of whole-number dimensions and produces the corresponding modern CSS declaration. Reduction uses the greatest common divisor of width and height. For 1920 by 1080, the greatest common divisor is 120. Dividing both dimensions by 120 gives 16 by 9. The decimal value is width divided by height, so 16:9 is approximately 1.7778. CSS accepts either the reduced numbers or the original dimensions in the aspect-ratio property, but reduced values are easier for people to recognize and review. The generated declaration can be pasted into a rule for an image wrapper, video frame, grid item, or other box. The aspect-ratio property supplies a preferred ratio. If an element has a definite width and an automatic height, the browser derives height from the ratio. If height is definite and width is automatic, it can derive width instead. When both dimensions are explicitly fixed, the ratio does not override them. Content, minimum sizes, maximum sizes, box sizing, and layout constraints can also affect the final rendered dimensions. Pairing width: 100% with an aspect ratio is a common way to make responsive media containers. Aspect ratio differs from resolution. Two images can both be 16:9 while containing very different pixel counts, such as 1280 by 720 and 3840 by 2160. The ratio controls shape, while resolution influences detail, file size, and display density. Cropping an image to a new ratio removes content; fitting it inside a differently shaped box may instead create empty space. CSS object-fit values such as cover and contain determine how replaced content behaves inside the reserved box. Use the intrinsic dimensions reported by the source asset when preventing layout shift. HTML width and height attributes allow browsers to infer a ratio even when responsive CSS changes the displayed size. For art-directed images or unusual breakpoints, confirm that each selected source has the intended composition. This calculator works with any common unit because only the proportion matters, but it requests integers so the greatest-common-divisor result is exact and produces a clean, predictable ratio.