Css media query aspect ratio

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

Source: developer.mozilla.org

Similar codes

1 vote363 views1 answer
Input date icon color change
CSS
126 votes464 views5 answers
React Bootstrap css import
CSS Bootstrap
2 votes303 views1 answer
Css transition syntax
CSS
1 vote302 views1 answer
Css div on the bottom
CSS
0 vote376 views3 answers
Bootstrap grid only css npm install
CSS Bootstrap
6 votes315 views4 answers
How to make the image in the center html
CSS
1 vote334 views2 answers
Css let div be last
CSS
0 vote306 views1 answer
Css select without class
CSS
0 vote332 views1 answer
Define keyframes with javascript
CSS
1 vote370 views1 answer
This selector doesn't have any properties and won't be rendered. sass
CSS