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
<iframe id="outer">
<div id="inner">
Watch this element as you resize iframe viewport's width and height.
</div>
</iframe>
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
aspect-ratio media feature |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support