Skip to content

Instantly share code, notes, and snippets.

@thorbrink
Created March 20, 2017 13:40
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 thorbrink/3ccd1164eb7ebf4f16105f982f6be94f to your computer and use it in GitHub Desktop.
Save thorbrink/3ccd1164eb7ebf4f16105f982f6be94f to your computer and use it in GitHub Desktop.
Aspect ratio
.outer {
position: relative;
&:before {
display: block;
content: "";
width: 100%;
/* Update (1 / 1) with (width / height) for desired ratio*/
padding-top: (1 / 1) * 100%;
}
> .inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment