HTML

<div class="a">
  <div class="b">縦横比を維持</div>
</div>

JavaScript

.a {
  display: flex;
}
.a .b {
  width: 100%;
  padding-top: calc(300 / 1000 * 100%);
  background: pink;
  text-align: center;
}