Aspect ratio

_aspect-ratio.scss

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

// Implementation
/////////////////
.map-wrapper {
  @include aspect-ratio(16, 9, '.map');
}
 

// Result
/////////
.map-wrapper {
  position: relative;
}
.map-wrapper:before {
  display: block;
  content: '';
  width: 100%;
  padding-top: 56.25%;
}
.map-wrapper > .map {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

_map.scss

@import 'aspect-ratio';

// Implementation
.map-wrapper {
  @include aspect-ratio(16, 9, '.map');
}

styles.css

/* Result */
.map-wrapper {
  position: relative;
}
.map-wrapper:before {
  display: block;
  content: '';
  width: 100%;
  padding-top: 56.25%;
}
.map-wrapper > .map {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}