Skip to content

Instantly share code, notes, and snippets.

@paulmsmith
Created November 27, 2014 10:48
Show Gist options
  • Save paulmsmith/345b7ec74b34348c7e42 to your computer and use it in GitHub Desktop.
Save paulmsmith/345b7ec74b34348c7e42 to your computer and use it in GitHub Desktop.
maintain aspect ratio mixin
// Maintain ratio mixin. Great for responsive grids, or videos.
// https://gist.github.com/brianmcallister/2932463
//
// $ratio - Ratio the element needs to maintain.
//
// Examples
//
// // A 16:9 ratio would look like this:
// .element {
// @include maintain-ratio(16 9);
// }
@mixin maintain-ratio($ratio: 1 1) {
@if length($ratio) < 2 or length($ratio) > 2 {
@warn "$ratio must be a list with two values.";
}
$width: 100%;
$height: percentage(nth($ratio, 2) / nth($ratio, 1));
width: $width;
height: 0;
padding-bottom: $height;
position: relative;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment