比率を保ったスペースを開ける

example.pug

.ratio_space-golden
  img.ratio_space__img(src="./img/main.jpg")

ratio_space.scss

$ratios:
  (name: "silver", w: 1, h: 1.414, r: 0.7071),
  (name: "golden", w: 1, h: 1.618, r: 0.6180),
  (name: "32", w: 3, h: 2, r: 0.6666),
  (name: "43", w: 4, h: 3, r: 0.75),
  (name: "169", w: 16, h: 9, r: 0.5625),
;
[class*="ratio_space-"] {
  position: relative;
  &:before {
    content: "";
    display: block;
  }
  .ratio_space__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
@each $ratio in $ratios {
  $name: map-get($map: $ratio, $key: "name");
  $w: map-get($map: $ratio, $key: "w");
  $h: map-get($map: $ratio, $key: "h");
  $r: map-get($map: $ratio, $key: "r");
  .ratio_space-#{$name} {
    &:before {
      padding-top: ($r * 100%);
    }
  }
}