请问，如何通过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; }
加個http://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>
JS實現吧 標準實現不了。 如果確實需要，神奇的還是可以實現的。
JS
騷年，數月之前吾曾於某高山僻壤處尋得一奇淫技巧可與爾一觀。然而這樣的技巧並沒有什麼卵用，切記切記！
這樣的技巧僅僅讓人對某個知識點有一些深刻的認識，這裏是想讓人了解到：上下邊距的百分比數值是以父元素寬度作為參照的。 要想實現你題目中的條件，用js，簡單得很。不必費盡周章絞盡腦汁非要用css實現。加個http://jsbin.com/kufuwaxiji/1/edit?html,output 寬高保持不變，你參考下，內容要絕對定位
JS實現吧 標準實現不了。 如果確實需要，神奇的還是可以實現的。