aspect-ratio

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The aspect-ratio CSS media feature can be used to test the aspect ratio of the viewport.

Syntax

The aspect-ratio feature is specified as a <ratio> value representing the width-to-height aspect ratio of the viewport. It is a range feature, meaning you can also use the prefixed min-aspect-ratio and max-aspect-ratio variants to query minimum and maximum values, respectively.

Examples

In the example below, a <div> element is contained in an <iframe>. The iframe creates its own viewport. Resize the <iframe> to see aspect-ratio in action.

Note that, when none of the media query conditions are true, the background will turn white because none of the below rules will be applied to the <div> inside the <iframe>. See if you can find which width and height values trigger this!

HTML

html
<iframe id="outer">
  <div id="inner">
    Watch this element as you resize iframe viewport's width and height.
  </div>
</iframe>

CSS

css
/* Minimum allowed aspect ratio */
/* Select aspect ratios 8/5 = 1.6 and above */
@media (min-aspect-ratio: 8/5) {
  div {
    background: #99f; /* blue */
  }
}

/* Maximum allowed aspect ratio */
/* Select aspect ratios 3/2 = 1.5 and below */
@media (max-aspect-ratio: 3/2) {
  div {
    background: #9f9; /* green */
  }
}

/* Exact aspect ratio, put it at the bottom to avoid override */
@media (aspect-ratio: 1/1) {
  div {
    background: #f99; /* red */
  }
}

Result

Note the min-aspect-ratio: 8/5 sets the lower bound to 1.6, so this media query selects elements with aspect ratios 1.6 and above. The max-aspect-ratio: 3/2 sets the upper bound, so this media query selects elements with aspect ratios 1.5 and below. The aspect-ratio: 1/1 overrides the max aspect ratio rule because it has been declared after and selects elements with aspect ratios exactly 1.

From the initial state, as you reduce height, the aspect ratio starts increasing from one. So the div's background color goes from red(1) < green(1.5) < white < blue(1.6).

Specifications

Specification
Media Queries Level 4
# aspect-ratio

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
aspect-ratio media feature

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also