Aspect ratio css

aspect-ratio: 16 / 9;
// horizontal/vertical

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

0 vote136 views1 answer
Prevenrt div with height 100% from growing up
CSS
3 votes127 views1 answer
Visibility transition css only on show
CSS
3 votes119 views6 answers
Uncaught TypeError: $ is not a function
CSS
0 vote124 views3 answers
Input adresse ville automatique
CSS
50 votes120 views5 answers
Css reset style
CSS
0 vote119 views1 answer
When change size image not change contrast css
CSS
0 vote76 views1 answer
Gulp postcss scss
CSS
0 vote114 views1 answer
Flexbox stretch
CSS
46 votes116 views2 answers
Customize scrollbar
CSS
0 vote123 views1 answer
Position inset css
CSS