- communauté
- Apprendre
- Bibliothèque d'outils
- Loisirs
Maison > Questions et réponses > le corps du texte
请问，如何通过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;
}
这样的技巧仅仅让人对某个知识点有一些深刻的认识，这里是想让人了解到：上下边距的百分比数值是以父元素宽度作为参照的。
要想实现你题目中的条件，用js，简单得很。不必费尽周章绞尽脑汁非要用css实现。
高洛峰2017-04-17 11:14:30
加个jsbin
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>
