[Define an aspect ratio for a <div>] Set the width and height and the aspect ratio will be determined automatically. #scss #css

mixins.scss

@mixin aspect-ratio($width, $height) {
  position: relative;
  
  &:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: ($height / $width) * 100%;
  }
}

// Example
.div {
  @include aspect-ratio(16,9);
  width: 100%;
}