本文介绍了根据高度维持div的长宽比的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我必须根据窗口大小的高度保持div的宽高比。I have to maintain the aspect ratio of a div with respect to the height on window resize.我可以保持宽高比使用 padding-bottom; 或 padding-top; 关于宽度（X％ 。I can maintain the aspect ratio(x:y) with regard to the width(X%) using padding-bottom; or padding-top;.所以从这个比喻，我尝试使用 padding-left;So from the analogy, I tried using padding-left;.wrapper{ height: Y%, position: relative;}.wrapper:after{ padding-left: Y(x/y)%; display:block;}但是 padding-leftBut the percentage value of padding-left does not give any width to the wrapper.如何根据div的高度维持该div的宽高比？How can I maintain the aspect ratio of that div according to its height?推荐答案由于％padding / margin是根据禁忌者的宽度计算的，你不能使用填充技术As % padding/margin are calculated according to the width of the contrainer, you can't use the "padding technique" to maitain aspect ratio according to the height.对于CSS解决方案，您必须使用 vh units：For a CSS solution, you will have to use vh units : vh：视口高度的1/100。 vh : 1/100th of the height of the viewport. 源有关浏览器支持，请参阅 canIuseFor browser support see canIuse 1：1宽高比的示例： DEMODEMO CSSdiv{ width: 50vh; height: 50vh;} 这篇关于根据高度维持div的长宽比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！
