Skip to content

Instantly share code, notes, and snippets.

@jonnymaceachern

jonnymaceachern/_mixins.scss

Created June 1, 2016 01:49
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 jonnymaceachern/39709a7e0ea5cbff84ff72d8aac42836 to your computer and use it in GitHub Desktop.
Save jonnymaceachern/39709a7e0ea5cbff84ff72d8aac42836 to your computer and use it in GitHub Desktop.
Download ZIP
Maintain aspect ratio as page scales
Raw
_mixins.scss
@see https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/
@mixin aspect-ratio($width, $height) {
position: relative;
&:before {
display: block;
content: "";
width: 100%;
padding-top: ($height / $width) * 100%;
}
> .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