Responsively change div size keeping width-height ratio

.wrapper {
  width: 50%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
}
.wrapper:after {
  padding-top: 56.25%;
  /* 16:9 ratio */
  display: block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

<div class="wrapper">
  <div class="main">
    This is your div with the specified aspect ratio.
  </div>
</div>