html

<!--padding -->
<div class="square">
  <div class="inner">
    <!-- 比率等倍ボックスに記述したい内容 -->
  </div>
</div>

<!-- aspect-ratio -->
<div class="hoge"></div>

scss

/* padding */

.square {
  position: relative;
  width: 30%; //希望の横幅
  padding-top: 30%; //　横幅=高さに設定
  background: blue; //デバッグ用背景
  .inner {
    position: absolute;
    top: 0;
    left: 0;
  }
}

/* aspect-ratio */
.hoge {
  width: 30%;
  aspect-ratio: 1/1; // X軸/Y軸 1/1にすることでwidth30%で算出した数値が高さに付与される
  background: blue;
}