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

aspect-ratio

The aspect-ratio CSS property allows you to define the desired width-to-height ratio of an element's box.

LayoutSizing

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