我看到高度的解决方案取决于宽度：
css height same as width.或者这里：
https://stackoverflow.com/a/6615994/2256981.
但我的问题恰恰相反.
但我的问题恰恰相反.
我的元素：
<body>
<div id="square"></div>
</body>
风格：
body,html {
margin: 0;
height: 100%;
min-height: 300px;
position: relative;
}
div#square { /* My square. */
height: 75%; /* It's height depends on ancestor's height. */
width: 75vh; /* If supported,preliminarily sets it's width. */
position: absolute; /* Centers it. */
left: 50%; top: 50%; transform: translate(-50%,-50%);
background-color: darkorange; /* Makes it visible. */
}
脚本,保持正方形：
window.onload = window.onresize = function (event) {
var mySquare = document.getElementById("square");
mySquare.style.width = mySquare.offsetHeight + 'px';
};
完整代码：http://jsfiddle.net/je1h/hxkgfr9g/
问题是在纯CSS中做同样的事情.没有脚本.
解决方法
我知道有两种技术可以根据元素的高度保持元素的宽高比：
当高度相对于视口时：
你可以使用vh单位：
div {
width: 75vh;
height: 75vh;
background:darkorange;
}
<div></div>
对于基于父元素高度的高度：
您可以使用具有所需宽高比的虚拟图像.宽高比为1：1的示例可以使用1 * 1透明的.png图像,或者@vlgalik评论1 * 1 base64编码的gif：
html,body{
height:100%;
margin:0;
padding:0;
}
#wrap{
height:75%;
}
#el{
display:inline-block;
height:100%;
background:darkorange;
}
#el img{
display:block;
height:100%;
width:auto;
}
<div id="wrap">
<div id="el">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
</div>
</div>
请注意,最后一个演示不会在窗口大小调整时更新.但纵横比保持在页面加载
更新：
正如在the comments设置中所报告的那样：inline-flex：on #el似乎解决了窗口调整大小问题的更新问题.
