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


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.


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


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


/* Minimum aspect ratio */
@media (min-aspect-ratio: 8/5) {
  div {
    background: #9af; /* blue */

/* Maximum aspect ratio */
@media (max-aspect-ratio: 3/2) {
  div {
    background: #9ff;  /* cyan */

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



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

Browser compatibility

ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
aspect-ratio media featureChrome Full support 3Edge Full support 12Firefox Full support 3.5IE Full support 9Opera Full support 10Safari Full support 5WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 4.2Samsung Internet Android Full support 1.0


Full support
Full support