宽度等于动态高度平方[重复]

当高度为父级 div 的 % 时，是否可以使用 css 或 js 将元素的宽度设置为与其高度相匹配。如果调整浏览器窗口的大小，子 div 也需要更改大小。

Example

body, html {height: 100%}
.parent {height: 100%; width: 960px;}
.child {
    height: 50%; 
    width: same as height; /* but not 50% of 960px, so that the child div is square*/
}

我正在尝试实现类似的目标，但宽度而不是高度。高度等于动态宽度（CSS 流体布局） https://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout

提前致谢 ：-）

如果您使用 jQuery，则可以设置width = height或反之亦然resize()功能。

http://jsfiddle.net/Ev6Vj/173/ http://jsfiddle.net/Ev6Vj/173/

$(window).resize(function() {
  $('#main').height($('#main').width());
});

<div id="main">
    <img src="http://placehold.it/200x200" />
</div>

#main {
    position: absolute;
    bottom: 0;
    top: 0;
    border: #000 thin solid;
    background: #DDEEFF;
    width: 100%;
}