HTML

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

JavaScript

.a {
  display: flex;
}
.a .b {
  width: 100%;
  padding-top: 30%;
  background: pink;
  text-align: center;
}