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>Watch this element as you resize your viewport's width and height.</div>


/* 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;



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 compatibilityUpdate compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 4 ? 3.5 9 53 Yes
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support Yes ? ? ? ? No Yes

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.