aspect-ratioBaseline · Widely available

The aspect-ratio CSS property controls the width-to-height ratio of elements. For <img> and <video> elements, the width and height attributes used together with height: auto control the aspect ratio while the image/video is loading.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Sep 20, 2021. Widely available since Mar 20, 2024.

How to use ↓Compare browsers

Browser support

DesktopChrome

1–87Not supported

88+Supportedsince Jan 19, 2021

Current: 155

Edge

12–87Not supported

88+Supportedsince Jan 21, 2021

Current: 154

Firefox

1–88Not supported

89+Supportedsince Jun 1, 2021

Current: 157

Safari

1–14.1Not supported

15+Supportedsince Sep 20, 2021

Current: 27

MobileChrome Android

18–87Not supported

88+Supportedsince Jan 19, 2021

Current: 155

Firefox Android

4–88Not supported

89+Supportedsince Jun 1, 2021

Current: 157

Safari iOS

1–14.5Not supported

15+Supportedsince Sep 20, 2021

Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

CSS

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

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

Feature detection

CSS · check before using

@supports (aspect-ratio: initial) {
  /* styles that rely on aspect-ratio */
}

/* or in JavaScript */
if (CSS.supports("aspect-ratio", "initial")) {
  // use it
}

Documentation (MDN)

aspect-ratio ↗

Specification

drafts.csswg.org#aspect-ratio ↗

Sub-features

Support for each part of the feature (4). The overall table above shows when the whole feature works.

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
aspect-ratio	88	88	89	15	88	89	15
aspect-ratio.auto	88	88	89	15	88	89	15
img.aspect_ratio_computed_from_attributes	79	79	71	15	79	79	15
video.aspect_ratio_computed_from_attributes	79	79	71	14	79	79	14