您可以使用纯CSS来完成；无需JavaScript。这利用了padding-top百分比（相对于包含块的
width）的（有点违反直觉）事实。这是一个例子：

.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;

  /* fill parent */

  background-color: deepskyblue;

  /* let's see it! */

  color: white;

}


<div class="wrapper">

  <div class="main">

    This is your div with the specified aspect ratio.

  </div>

</div>