Aspect ratio property

Syntax and values

The property accepts either auto or a numeric ratio written as a <number> or <number> / <number>, representing width divided by height. Examples include 16 / 9, 3 / 4, or 1 (a square). Whitespace around the slash is allowed, decimals are valid, and units are not permitted. The value auto means no preferred aspect ratio for most elements; for replaced elements (such as images and video), auto typically uses their intrinsic ratio if known from the file or explicit dimensions.

Interaction with width, height, and constraints

aspect-ratio participates in used-size calculations when one dimension is auto or unconstrained. If width is definite and height is auto, the browser derives height from width and the ratio; likewise, if height is definite and width is auto, width is derived. When both width and height are definite, the aspect ratio does not alter those explicit values but can still influence intrinsic size contributions in layout algorithms (for example, in flex and grid). min-* and max-* constraints can clamp the computed dimension and may cause the other dimension to adjust accordingly to maintain the ratio where possible.

Examples and common patterns

Common usages include aspect-ratio: 1 / 1 for square thumbnails, 4 / 3 for photo galleries, and 16 / 9 for video wrappers or hero banners. Combined with width: 100%, cards and media boxes scale fluidly while maintaining visual consistency. For replaced elements like <img>, aspect-ratio often complements width and height attributes rather than replacing them, ensuring that both intrinsic sizing and CSS-level layout produce stable boxes across devices and loading states.

What aspect-ratio does

aspect-ratio supplies a preferred proportion that the layout engine uses to compute a missing dimension, so the browser can reserve space early. This reduces unexpected jumps when content arrives later (for example, when an image finishes downloading or a web font loads and changes content flow). The property does not crop content by itself; it simply defines the box’s geometry. For media content, object-fit and object-position control how the content is fitted or cropped inside that box.

On non-replaced elements (e.g., a <div> wrapper), aspect-ratio lets authors create fixed-ratio containers that scale fluidly with available width. This replaces legacy percentage-padding hacks used to simulate intrinsic ratios. On replaced elements (e.g., <img>, <video>, <iframe>), the user agent typically has an intrinsic aspect ratio from the source or attributes; aspect-ratio complements or, when explicitly set, can override that preferred ratio for layout purposes.

In modern layout contexts, aspect-ratio integrates with flexbox and grid. For flex items, the property can determine the cross size when the main size is resolved and a dimension is otherwise auto. In CSS Grid, fixed-ratio cards remain consistent across tracks, especially when combined with minmax(), auto-fit/auto-fill, and responsive gaps, enabling uniform, stable mosaics without manual height calculations or JavaScript.

Core Web Vitals context

Cumulative Layout Shift (CLS) is sensitive to late dimension changes. Using aspect-ratio ensures a predictable used size when one dimension is not yet known, so the page reserves the intended area before assets arrive. For image-heavy interfaces, this can eliminate a major source of visual instability, especially when images are lazy-loaded or fetched after initial render. Stable placeholders reduce content jumps and prevent user frustration during scrolling or interaction.

Largest Contentful Paint (LCP) benefits indirectly. While aspect-ratio does not alter decoding speed, it helps the browser determine layout quickly and prevents late shifts that could trigger additional relayout. By pairing width and height attributes on <img> with CSS aspect-ratio for wrappers, the main content can occupy a definitive box earlier, minimising relayout churn around the eventual LCP element. This contributes to a smoother path to a good LCP outcome, particularly on image-led pages and hero sections.

Interaction to Next Paint (INP) is also protected by avoiding jank during input. If mid-scroll images pop in without reserved space, inputs and scroll positions can be disrupted. A consistent, ratio-based layout reduces this risk, making interfaces feel more responsive even when network conditions are variable and images are progressively fetched. The overall effect is a more stable rendering pipeline across devices and bandwidths.

Responsive images and containers

For responsive media, aspect-ratio is most effective when combined with fluid sizing. A common pattern sets width: 100% and aspect-ratio: 16 / 9 on a media wrapper, with the media inside sized to fill the box using object-fit. This approach maintains consistent presentation across breakpoints without manual height calculations. For pure <img> elements, include width and height attributes reflecting the intrinsic dimensions; the browser scales them proportionally, and aspect-ratio can remain a wrapper concern or a refinement when intrinsic ratios vary by source.

Art direction and varying ratios

When art direction demands different crops at different breakpoints (for example, 16:9 on desktop and 4:5 on mobile), media queries can change the aspect-ratio on the container while responsive sources (srcset/picture) deliver appropriately cropped assets. Alternatively, keep the image intrinsic ratio and control the viewport crop with object-fit: cover on a fixed-ratio wrapper. This yields predictable layout stability while allowing editorial control of focal areas across devices.

Grids of cards or product tiles often benefit from consistent ratios to avoid visual drift. aspect-ratio ensures rows align and prevents uneven columns caused by variable image heights. In carousels and masonry-like layouts, setting aspect-ratio on items avoids asynchronous growth when late-loading assets arrive, helping keep navigation arrows, captions, and CTAs in stable positions throughout the interaction.

Broad support

aspect-ratio is supported in all modern evergreen browsers, including Chromium-based browsers, Firefox, and Safari. It is not supported in Internet Explorer. On iOS and macOS Safari, support has matured across recent releases, making the property viable for production use on contemporary Apple devices. Given the breadth of support, the property is now a dependable replacement for legacy intrinsic-ratio techniques in most environments where evergreen updates are standard.

For older or locked-down environments, progressive enhancement is straightforward. width and height attributes on images provide intrinsic sizing across all browsers. Where required, a percentage-padding fallback can be conditionally applied inside a feature query such as @supports (aspect-ratio: 1 / 1) to target modern engines and provide alternative rules when unsupported. This ensures baseline stability without sacrificing modern ergonomics in capable clients.

Implementation notes

The property influences layout only when one dimension is auto or otherwise unresolved; setting both width and height to definite values leaves no room for aspect-ratio to adjust the box. min-width, min-height, max-width, and max-height can change the final used size by clamping one axis; the other axis may be recalculated to preserve the ratio, subject to available space and algorithmic constraints. Keep in mind that box-sizing affects how borders and padding contribute to the final border-box size, but the ratio itself is applied to the content box during intrinsic calculations.

For replaced elements, an intrinsic aspect ratio usually exists from the file or from width and height attributes. Explicitly setting aspect-ratio is typically unnecessary for well-annotated images but can be used to enforce a design-specific proportion in situations where sources vary. When intentionally cropping visual content, rely on object-fit: cover and object-position for control; combine with overflow: hidden on wrappers when the crop must be applied to non-replaced content within a fixed-ratio container.

Comparisons

• HTML width and height attributes vs aspect-ratio: Attributes provide intrinsic sizing for images at parse time and are essential for CLS prevention; aspect-ratio complements them, especially for wrappers and non-image boxes.
• Padding-top intrinsic ratio hacks vs aspect-ratio: The modern property is simpler, more readable, and better integrated with layout algorithms, removing the need for extra wrapper elements or pseudo-elements.
• object-fit vs aspect-ratio: object-fit controls how media fits inside a box; aspect-ratio controls the box’s geometry. They are complementary rather than interchangeable.
• contain-intrinsic-size vs aspect-ratio: The former provides a synthetic size for offscreen content to improve performance; aspect-ratio sets proportions for onscreen layout stability. They target different phases of rendering.

FAQs

Does aspect-ratio reserve space before an image loads?

Yes, when one dimension is auto or unspecified, the browser uses aspect-ratio during layout to compute the missing dimension and reserve space. For images specifically, width and height attributes further improve early layout by giving the browser intrinsic size information at parse time, which is the most robust way to prevent CLS. Using both techniques ensures consistent placeholders across different elements and loading scenarios.

Should I still set width and height on images if I use aspect-ratio?

Yes. width and height attributes encode the intrinsic dimensions of the file and let the browser calculate the intrinsic ratio immediately. aspect-ratio is useful for wrappers, non-replaced elements, and cases where you need to enforce a particular proportion in CSS. Together, they provide the strongest guard against layout shifts across responsive breakpoints and slow networks.

Does aspect-ratio crop content or change image composition?

No. aspect-ratio defines the box’s proportion; it does not crop by itself. If your content does not match the box, you will see empty space or overflow depending on other CSS. Use object-fit: cover or contain (for images/videos) or overflow: hidden on wrappers to control the visual result while retaining stable layout geometry from aspect-ratio.

How does aspect-ratio behave in flex and grid layouts?

In flexbox, if the main size is resolved and the cross size is auto, aspect-ratio determines the cross axis size. In grid, it helps grid items maintain consistent heights across tracks when the width is determined by the grid. This leads to tidy, uniform cards without manual row height control. Constraints (min/max) still apply and can clamp one dimension, after which the other is recalculated to preserve the ratio when possible.

Can I use decimals instead of a fraction for aspect-ratio values?

Yes. aspect-ratio: 1.7778 is equivalent to 16 / 9, and aspect-ratio: 0.75 is equivalent to 3 / 4. Fractions can be more readable for common formats, while decimals are convenient for computed or design-system-driven values. Avoid using units; only unitless numbers (either a single number or two numbers separated by a slash) are valid.