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 vote122 views1 answer
Api not working in github pages
CSS
0 vote124 views1 answer
Code-runner.executormap kotlin
CSS
3 votes173 views2 answers
Bootstrap 5 pagination
CSS Bootstrap
2 votes125 views1 answer
Sass class with another class
CSS
4 votes120 views2 answers
Change element in iframe
CSS
0 vote107 views1 answer
Overriding fullpage js anchor style
CSS
1 vote116 views1 answer
Input time without am pm
CSS
1 vote118 views2 answers
How to center topnav bar in html
CSS
1 vote171 views1 answer
BEM example css
CSS
0 vote114 views1 answer
Responsive typography
CSS