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

5 votes385 views1 answer
1 line darkmode css
CSS
0 vote420 views1 answer
Css inverted border radius
CSS
0 vote396 views1 answer
Insert background colour to css file
CSS
0 vote375 views1 answer
Profile page html css template
CSS
1 vote390 views1 answer
Overflow text newline
CSS
5 votes330 views3 answers
How to make a linear gradient in css
CSS
0 vote415 views1 answer
#f7fafc
CSS
9 votes546 views3 answers
Console.log style css
CSS
0 vote392 views1 answer
Box shadow 2 sides only
CSS
1 vote386 views4 answers
Css before
CSS