请问，如何通过CSS实现高度height随宽度width变化而变化，保持长宽比例一致，宽度是根据父元素宽度变化的，
既：width:20%
人生最曼妙的风景，竟是内心的淡定与从容！
骚年，数月之前吾曾于某高山僻壤处寻得一奇淫技巧可与尔一观。然而这样的技巧并没有什么卵用，切记切记！
html: <p class = "father"> <p class = "daughter"></p> // 父女情深 </p> css: .father { width: 70%; } .daughter { width: 90%; height: 0; padding-top: 60%; background: black; }
这样的技巧仅仅让人对某个知识点有一些深刻的认识，这里是想让人了解到：上下边距的百分比数值是以父元素宽度作为参照的。 要想实现你题目中的条件，用js，简单得很。不必费尽周章绞尽脑汁非要用css实现。
加个jsbinhttp://jsbin.com/kufuwaxiji/1/edit?html,output
jsbin
宽高保持不变，你参考下，内容要绝对定位
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css_square</title> <style> .main { width: 600px; } .rect1 { position: relative; width: 50%; background: #f30; padding-bottom: 50%; } .rect1 > .inner, .rect2 > .inner { padding: 100px; position: absolute; top: 50%; left: 50%; background-color: #0ac; -webkit-transform: translate(-50%, -50%); } .rect2 > .inner { background-color: #0cc; } .rect2 { position: relative; width: 50%; background: #f30; } .rect2:before { content: ""; display: block; padding-top: 100%; width: 100%; background: #08c; } </style> </head> <body> <input type="range" min="1" max="300" id="range"> <hr> 纯CSS实现正方形布局 <hr> <p class="main"> <p class="rect1"> <p class="inner"></p> </p> <hr> <p class="rect2"> <p class="inner"></p> </p> </p> <script> document.querySelector('#range').addEventListener('change', function(e) { document.querySelector('.main').style.width = 600 + this.value/1 + 'px' }) </script> </body> </html>
JS实现吧 标准CSS实现不了。
JS
CSS
如果确实需要，神奇的IE6还是可以实现的。
IE6
骚年，数月之前吾曾于某高山僻壤处寻得一奇淫技巧可与尔一观。然而这样的技巧并没有什么卵用，切记切记！
这样的技巧仅仅让人对某个知识点有一些深刻的认识，这里是想让人了解到：上下边距的百分比数值是以父元素宽度作为参照的。
要想实现你题目中的条件，用js，简单得很。不必费尽周章绞尽脑汁非要用css实现。
加个
jsbinhttp://jsbin.com/kufuwaxiji/1/edit?html,output
宽高保持不变，你参考下，内容要绝对定位
JS实现吧标准
CSS实现不了。如果确实需要，神奇的
IE6还是可以实现的。