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. This means that even if the parent container or viewport size changes, the browser will adjust the element's dimensions to maintain the specified width-to-height ratio. The specified aspect ratio is used in the calculation of auto sizes and some other layout functions.

At least one of the box's sizes needs to be automatic in order for aspect-ratio to have any effect. If neither the width nor height is an automatic size, then the provided aspect ratio has no effect on the box's preferred sizes.

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