Skip to content

Instantly share code, notes, and snippets.

@nocodesupplyco

nocodesupplyco/aspect-ratio.css

Created December 16, 2022 18:36
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nocodesupplyco/55d9f0ecd86a5ef1d8e2557677803160 to your computer and use it in GitHub Desktop.
Save nocodesupplyco/55d9f0ecd86a5ef1d8e2557677803160 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Aspect Ratio
Raw
aspect-ratio.css
/* Set aspect ratio on an element/class */
.div {
aspect-ratio: 16 / 9;
}
/* 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 */
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment