Skip to content

Instantly share code, notes, and snippets.

@alexeyraspopov

alexeyraspopov/aspect-ratio-box.css

Last active February 20, 2020 18:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alexeyraspopov/505957ce54d1ed7c902d45d4ddc0ce26 to your computer and use it in GitHub Desktop.
Save alexeyraspopov/505957ce54d1ed7c902d45d4ddc0ce26 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
aspect-ratio-box.css
/* source: https://css-tricks.com/aspect-ratio-boxes/ */
.aspect-ratio-box {
position: relative;
}
.aspect-ratio-box::before {
content: '';
float: left;
padding-top: calc(100% / (var(--aspect-ratio))); /* --aspect-ratio: 16 / 9 */
}
.aspect-ratio-box::after {
content: '';
display: table;
clear: both;
}
.aspect-ratio-box-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment