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 vote127 views2 answers
Use font awesome as content in css
CSS
1 vote95 views1 answer
Insert background image css error
CSS
0 vote148 views1 answer
Inline block and 50% width not aligning items
CSS
29 votes100 views9 answers
Traduttore
CSS
0 vote102 views2 answers
Sass if
CSS
0 vote113 views1 answer
Add title to slider
CSS
2 votes109 views2 answers
Css grid make all rows same height
CSS
75 votes103 views6 answers
Flexbox
CSS
6 votes108 views4 answers
Tailwind css npm
CSS
2 votes139 views1 answer
Transfrom rotate
CSS