[更新：虽然我是独立发现这个技巧的，但后来我知道蒂埃里·科布伦茨打败了我。您可以在 A List Apart 上找到他2009 年的文章。信用到期的信用。]

我知道这是一个老问题，但我遇到了类似的问题，我也只能解决与CSS。这是我讨论解决方案的博客文章。帖子中包含一个活生生的例子。代码在下面重新发布。

#container {
  display: inline-block;
  position: relative;
  width: 50%;
}

#dummy {
  margin-top: 75%;
  /* 4:3 aspect ratio */
}

#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver/* show me! */
}

<div id="container">
  <div id="dummy"></div>
  <div id="element">
    some text
  </div>
</div>

有一种使用 CSS 的方法！

如果根据父容器设置宽度，则可以将高度设置为 0 并将 padding-bottom 设置为将根据当前宽度计算的百分比：

.some_element {
    position: relative;
    width: 20%;
    height: 0;
    padding-bottom: 20%;
}

这适用于所有主要浏览器。

JSFiddle：https ://jsfiddle.net/ayb9nzj3/

没有任何 Javascript 也是可能的 :)

HTML：

<div class='box'>
    <div class='content'>Aspect ratio of 1:1</div>
</div> 

CSS：

.box {
    position: relative;
    width:    50%; /* desired width */
}

.box:before {
    content:     "";
    display:     block;
    padding-top: 100%; /* initial ratio of 1:1*/
}

.content {
    position: absolute;
    top:      0;
    left:     0;
    bottom:   0;
    right:    0;
}

/* Other ratios - just apply the desired class to the "box" element */
.ratio2_1:before{
    padding-top: 50%;
}
.ratio1_2:before{
    padding-top: 200%;
}
.ratio4_3:before{
    padding-top: 75%;
}
.ratio16_9:before{
    padding-top: 56.25%;
}

简单和 neet ：vw根据视口宽度使用响应高度/宽度的单位。

vw ：视口宽度的 1/100。（源 MDN）

演示

HTML：

<div></div>

1:1 纵横比的CSS：

div{
    width:80vw;
    height:80vw; /* same as width */
}

根据元素的所需纵横比和宽度计算高度的表格。

   aspect ratio  |  multiply width by
    -----------------------------------
         1:1      |         1
         1:3      |         3
         4:3      |        0.75
        16:9      |       0.5625

此技术允许您：

• 在元素内插入任何内容而不使用 position:absolute;
• 没有不必要的 HTML 标记（只有一个元素）
• 使用 vh 单位根据视口的高度调整元素纵横比
• 您可以根据视口的高度和宽度制作始终适合视口的响应式正方形或其他纵横比（请参阅此答案：根据视口的宽度和高度或此演示的响应式正方形）

IE9+ 支持这些单位，请参阅canIuse 了解更多信息

使用 jQuery，您可以通过执行此操作来实现此目的

var cw = $('.child').width();
$('.child').css({'height':cw+'px'});

在http://jsfiddle.net/n6DAu/1/检查工作示例