aspect-ratio
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.
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
html
<div id="inner">
Watch this element as you resize your viewport's width and height.
</div>
CSS
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 */
}
}
Result
Specifications
Specification |
---|
Media Queries Level 4 # aspect-ratio |
Browser compatibility
BCD tables only load in the browser