Widely availableRecommended whenever a box needs a stable proportion and should adapt fluidly to available width.
Layout Widely available

aspect-ratio

aspect-ratio preserves a proportional relationship between width and height without padding hacks. It is especially helpful for media, cards, and placeholders that must remain visually stable.

LayoutSizing

Overview

aspect-ratio preserves a proportional relationship between width and height without padding hacks. It is especially helpful for media, cards, and placeholders that must remain visually stable.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
aspect-ratio
88
88
89
15
88
15
auto
88
88
89
15
88
15
HTML attribute
aspect_ratio_computed_from_attributes

Aspect ratio computed from `width` and `height` attributes
79
79
71
15
79
15
aspect_ratio_computed_from_attributes

Aspect ratio computed from `width` and `height` attributes
79
79
71
14
79
14
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (15)
Implementation note
  • Safari doesn't preserve space for images without a valid `src`, which may disrupt layouts that rely on lazy loading (see bug 224197).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (15)
Implementation note
  • Safari on iOS doesn't preserve space for images without a valid `src`, which may disrupt layouts that rely on lazy loading (see bug 224197).

Syntax

CSS 
.video-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.avatar {
  aspect-ratio: 1;
  width: 48px;
  border-radius: 50%;
  object-fit: cover;
}

Live demo

16:9(video)

aspect-ratio property 16:9(video) demo.

PreviewFullscreen

1:1(positivesideshape)

aspect-ratio property 1:1(positivesideshape) demo.

PreviewFullscreen

4:3(true)

aspect-ratio property 4:3(true) demo.

PreviewFullscreen

Use cases

  • Media placeholders

    Reserve space for images or video thumbnails to reduce layout shift while content loads.

  • Consistent cards

    Keep visual tiles uniform even when their content or viewport width changes.

Cautions

  • The ratio sets the box shape, not the content fitting behavior, so images may still need object-fit.
  • Fixed ratios can hide or crop content if the box contains more text than expected.

Accessibility

  • Stable proportions reduce layout jump, which helps users maintain orientation while a page is loading.

Related links

Powered by web-features