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

222 votes527 views6 answers
Bootstrap CSS CDN
CSS
1 vote340 views1 answer
React hide scrollbar
CSS
44 votes340 views6 answers
Select odd child css
CSS
22 votes332 views3 answers
Css disable text select
CSS
62 votes329 views5 answers
Media max width css
CSS
1 vote375 views1 answer
Overflow scrollbar with variable height
CSS
2 votes330 views1 answer
Underline css animation hover
CSS
0 vote340 views2 answers
Webkit box shadow not working
CSS
0 vote323 views1 answer
Css calc margin-top based on height?
CSS
0 vote321 views1 answer
Hide calendar icon
CSS