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

71 votes142 views6 answers
Css center image
CSS
1 vote101 views1 answer
Css border only top and bottom
CSS
1 vote110 views1 answer
How to open emoji keyboard windows 10
CSS
9 votes110 views1 answer
Howt to original image on background css
CSS
24 votes114 views2 answers
Text-overflow: ellipsis; 2 line
CSS
3 votes113 views2 answers
Css disable button click
CSS
0 vote114 views1 answer
1rem in px
CSS
21 votes106 views5 answers
Text-overflow: ellipsis 2 lines
CSS
1 vote97 views1 answer
IPhone XS css
CSS
0 vote100 views1 answer
Autoprefixer\
CSS