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
The example below is contained in an <iframe>
, which creates its own viewport. Resize the <iframe>
to see aspect-ratio
in action.
HTML
<div id='inner'> Watch this element as you resize your viewport's width and height. </div>
CSS
/* 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 */ } }
_Example
used iframe and DataURL to enable this iframe could resize
HTML
<label id="wf" for="w">width:165</label> <input id="w" name="w" type="range" min="100" max="250" step="5" value="165"> <label id="hf" for="w">height:165</label> <input id="h" name="h" type="range" min="100" max="250" step="5" value="165"> <iframe id="outer" src="data:text/html,<style> @media (min-aspect-ratio: 8/5) { div { background: %239af; } } @media (max-aspect-ratio: 3/2) { div { background: %239ff; } } @media (aspect-ratio: 1/1) { div { background: %23f9a; } }</style><div id='inner'> Watch this element as you resize your viewport's width and height.</div>"> </iframe>
CSS
iframe{ display:block; }
JavaScript
outer.style.width=outer.style.height="165px" w.onchange=w.oninput=function(){ outer.style.width=w.value+"px" wf.textContent="width:"+w.value } h.onchange=h.oninput=function(){ outer.style.height=h.value+"px" hf.textContent="height:"+h.value }
Result
Specifications
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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
aspect-ratio media feature | Chrome Full support 3 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support 9 | Opera Full support 10 | Safari Full support 5 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 4.2 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support