css3 - 请问，如何通过CSS实现高度height随宽度width变化而变化，保持长宽比例不变，宽度是根据父元素宽度变化的？
问题描述
请问，如何通过CSS实现高度height随宽度width变化而变化，保持长宽比例一致，宽度是根据父元素宽度变化的，
既：width:20%
问题解答
回答1：骚年，数月之前吾曾于某高山僻壤处寻得一奇淫技巧可与尔一观。然而这样的技巧并没有什么卵用，切记切记！
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实现。
回答2：加个jsbinhttp://jsbin.com/kufuwaxiji/1/edit?html,output
宽高保持不变，你参考下，内容要绝对定位
<!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>回答3：
JS实现吧标准CSS实现不了。
如果确实需要，神奇的IE6还是可以实现的。
相关文章：
网公网安备