Skip to content

Instantly share code, notes, and snippets.

@d1i1m1o1n
Created June 14, 2021 12:05
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save d1i1m1o1n/f90d8b3d156783085c877250023b1da4 to your computer and use it in GitHub Desktop.
We can use CSS aspect-ratio today by using CSS @supports and CSS variables.
.card {
--aspect-ratio: 16/9;
padding-top: calc((1 / (var(--aspect-ratio))) * 100%);
}
@supports (aspect-ratio: 1) {
.card {
aspect-ratio: var(--aspect-ratio);
padding-top: initial;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment