paddingを使った縦横比を維持した可変ボックス

paddingを使い、希望の縦横比を維持した可変ボックスをつくります。

HTML(Pug)

.box

CSS(SCSS)

.box {
  background-color: gray;
  width: 50%;
  margin: 0 auto;
  height: auto;
  position: relative;
  &::before {
    content: '';
    display: block;
    padding-top: 50%;
  }
}