mixin aspect-ratio

mixin_aspect_ratio.scss

@mixin aspect-ratio($width, $height) {
   position: relative;
   &:before {
      display: block;
      content: "";
      width: 100%;
      padding-top: ($height / $width) * 100%;
   }
   > .inner-box {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
   }
}

/*
<!-- HTML -->
<div class="outer-box">
   <div class="inner-box"></div>
</div>

<!-- SCSS -->
.outer-box {
   @include aspect-ratio(4, 3);
}
*/