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