Aspect ratio

Responsive scaling

In responsive layouts, constraining one dimension lets the browser compute the other using the aspect ratio, preventing stretch or squeeze. This supports fluid grids and container-based sizing without distortion.

When the container and media ratios differ, CSS object-fit can letterbox, crop, or contain the image predictably. The ratio does not choose which resource to download; srcset and sizes handle selection, while aspect ratio preserves shape.

Overview

Declaring aspect ratio lets the browser allocate the correct layout box before the asset loads, reducing layout instability. Browsers can infer it from HTML width and height attributes, the CSS aspect-ratio property, or from intrinsic media dimensions once available.

Early knowledge of ratio is especially important with lazy-loading images and embeds, where late discovery would otherwise push content and cause reflows.

Purpose of these features

Maintaining aspect ratio ensures visual integrity, predictable cropping, and consistent alignment across breakpoints and devices. For performance, it prevents cumulative layout shift (CLS) by reserving stable space during page rendering.

For content management and design systems, standardised ratios simplify art direction, thumbnails, and placeholders, making image slots interchangeable without layout changes.

Core formula and representations

Ratio (decimal) = width ÷ height. As a pair, it is written width:height (e.g. 1200×675 → 16:9; 800×800 → 1:1). Fractions can be reduced to simplest terms for clarity.

Browsers compute ratio from declared width and height or from CSS aspect-ratio. If only one dimension is set in CSS, the other is derived using the ratio, preserving shape.

Pitfalls: distortion and layout shift

Forcing dimensions that conflict with the intrinsic ratio distorts images. Use correct width/height values or aspect-ratio with object-fit to avoid stretching or unintended crops.

Omitting ratio on images and embeds can cause late reflow and CLS as media loads. Mismatched declared dimensions also reserve incorrect space, leading to jumps when the intrinsic size is discovered.