Aspect Ratio Handler Mixin

aspect-ratio.scss

/*---------------------------------------------------------------*\
  ASPECT RATIO HANDLER
    preserves the aspect ratio of an element

    usage:
      @include aspect-ratio(16, 9);
  
    note:
      you can use this link to find your desired aspect ratio
      http://andrew.hedges.name/experiments/aspect_ratio/
  
      or you can just use the original dimensions of your element
      e.g.
        @include aspect-ratio(1280, 720);
\*---------------------------------------------------------------*/

@mixin aspect-ratio($w, $h, $bgs: cover, $bgpx: center, $bgpy: center) {
  overflow: hidden;
  position: relative;
  background-size: $bgs;
  background-position: $bgpx $bgpy;
  background-repeat: no-repeat;
  &:before {
    padding-bottom: $h * 100% / $w;
    display: block;
    content: '';
  }
}