Skip to content

Instantly share code, notes, and snippets.

@iamnewton
Last active February 7, 2017 14: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 iamnewton/bd643fd3fb255caec5f8 to your computer and use it in GitHub Desktop.
Save iamnewton/bd643fd3fb255caec5f8 to your computer and use it in GitHub Desktop.
@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;
}
}
<div class="sixteen-nine">
<div class="content">
insert content here
this will maintain a 16:9 aspect ratio
</div>
</div>
.sixteen-nine {
@include aspect-ratio(16, 9);
}
@manuestrella28
Copy link

and with images how???

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment