aspect-ratio

The aspect-ratio CSS @media media feature can be used to apply styles based on 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.

Example

HTML

<div>Watch this element as you resize your viewport's width and height.</div>

CSS

/* Exact aspect ratio */
@media (aspect-ratio: 1/1) {
  div {
    color: red;
  }
}

/* Minimum aspect ratio */
@media (min-aspect-ratio: 8/5) {
  div {
    background: yellow;
  }
}

/* Maximum aspect ratio */
@media (max-aspect-ratio: 2/1) {
  div {
    border: 2px solid blue;
  }
}

Result

Specifications

Specification Status Comment
Media Queries Level 4
The definition of 'aspect-ratio' in that specification.
Working Draft No change.
Media Queries
The definition of 'aspect-ratio' in that specification.
Recommendation Initial definition.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? 3.5 (1.9.1) 9.0 ? ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

 

Document Tags and Contributors

 Contributors to this page: mfluehr, Kinifwyne, mrenty, ErwinWessels, andylampert, cvrebert
 Last updated by: mfluehr,