请问，如何通过CSS实现高度height随宽度width变化而变化，保持长宽比例一致，宽度是根据父元素宽度变化的，
既：width:20%
PHP中文网2017-04-17 11:14:30
騷年，數月之前吾曾於某高山僻壤處尋得一奇淫技巧可與爾一觀。然而這樣的技巧並沒有什麼卵用，切記切記！
html:
<p class = "father">
<p class = "daughter"></p> // 父女情深
</p>
css:
.father {
width: 70%;
}
.daughter {
width: 90%; height: 0;
padding-top: 60%;
background: black;
}
高洛峰2017-04-17 11:14:30
加個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>
