我知道有两种技术可以根据元素的高度保持元素的长宽比：
当 ：
您可以使用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>
请注意，此最后一个演示不会在调整窗口大小时更新。 但是长宽比保持在页面负载上
正如在注释设置中所报告的那样display:inline-flex:，#el似乎可以解决窗口大小调整方面的更新问题。
602392714
清零编程群