使用jQuery，您可以通过以下操作来实现这一点

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

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

[更新:虽然我是独立发现这个技巧的，但我后来知道Thierry Koblentz打败了我。你可以在A List Apart上找到他2009年的文章。该表扬就表扬。]

我知道这是一个老问题，但我遇到过一个类似的问题，我只用CSS解决了。这是我的博客文章讨论的解决方案。文章中有一个活生生的例子。代码转载如下。

#{容器 显示:inline-block; 位置:相对; 宽度:50%; ｝ #假{ margin-top: 75%; /* 4:3纵横比*/ ｝ #{元素 位置:绝对的; 上图:0; 底部:0; 左:0; 右:0; 背景色:银色/*给我看看!* / ｝ < div id = "容器" > < div id = "假" > < / div > < div id = "元素" > 一些文本 < / div > < / div >

有一种使用CSS的方法!

如果你根据父容器设置宽度，你可以将height设置为0，并将padding-bottom设置为百分比，该百分比将根据当前宽度计算:

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

这在所有主流浏览器中都运行良好。

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

真的，这是对内森的回答的一个评论，但我还不允许这样做…… 我想保持纵横比，即使盒子里有太多东西装不下。他的例子扩大了高度，改变了纵横比。我发现

overflow: hidden;
overflow-x: auto;
overflow-y: auto;

对元素有帮助。参见http://jsfiddle.net/B8FU8/3111/

这是可能的，没有任何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%;
}

现在最好的方法:纵横比属性(2022)

div { 纵横比:1 / 1; 宽度:50%; 边框:1px纯红色; ｝ <div>纵横比:1 / 1</div> .

其他方法:根据视口宽度使用vw单位作为响应高度/宽度。

Vw:视口宽度的百分之一。(源MDN)

DEMO

HTML:

<div></div>

CSS为1:1的纵横比:

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了解更多信息

宽度:80 vmin; 身高:80 vmin;

CSS 最小视图的80%是高度还是宽度

http://caniuse.com/#feat=viewport-units

扩展顶部/底部填充技术，可以使用伪元素来设置元素的高度。使用浮动和负边距从流和视图中删除伪元素。

这允许您在不使用额外的div和/或CSS定位的情况下将内容放置在框内。

.fixed-ar::before { content: ""; float: left; width: 1px; margin-left: -1px; } .fixed-ar::after { content: ""; display: table; clear: both; } /* proportions */ .fixed-ar-1-1::before { padding-top: 100%; } .fixed-ar-4-3::before { padding-top: 75%; } .fixed-ar-16-9::before { padding-top: 56.25%; } /* demo */ .fixed-ar { margin: 1em 0; max-width: 400px; background: #EEE url(https://lorempixel.com/800/450/food/5/) center no-repeat; background-size: contain; } <div class="fixed-ar fixed-ar-1-1">1:1 Aspect Ratio</div> <div class="fixed-ar fixed-ar-4-3">4:3 Aspect Ratio</div> <div class="fixed-ar fixed-ar-16-9">16:9 Aspect Ratio</div>

极其简单的方法jsfiddle

HTML

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

CSS

#container {
    width: 50%; /* desired width */
}

#element {
    height: 0;
    padding-bottom: 100%;
}