如何通过CSS实现高度 height 随宽度 width 变化而变化，保持长宽比例不变，宽度是根据父元素宽度变化的？
使用 :before 伪元素，能获取到实际高度，推荐
html:
<div>
<span>1</span>
</div>
css:
body {
width: 100%;
font-size: 0;
text-align: center;
}
div {
display: inline-block;
width: 20%;
background: green;
font-size: 12px;
position: relative;
vertical-align: middle;
}
div:nth-child(2n) {
background: orange;
}
div:before {
content: "";
display: inline-block;
padding-bottom: 100%;
width: .1px;
vertical-align: middle;
}
div span {
display: inline-block;
vertical-align: middle;
font-size: 4em;
color: #fff;
}
奇淫技巧
html:
<div class = "father">
<div class = "daughter"></div> // 父女情深
</div>
css:
.father {
width: 100%;
}
.daughter {
width: 20%; height: 0;
padding-top: 20%;
background: black;
}
主要知识：上下边距的百分比数值是以父元素宽度作为参照的。
在开发移动端页面时，需要供应的手机屏幕大小不一，此时经常会使用百分比来界定元素的大小，那么如何让元素按宽高比例布局呢？
在保持元素宽高比恒定的情况下，要使得元素可以和父元素同比缩放。此时会用到 padding。
需要知道的是：一个元素的 padding，如果值是一个百分比，那这个百分比是相对于其父元素的宽度而言的，padding-bottom 也是如此。
使用 padding-bottom 来代替 height 来实现高度与宽度成比例的效果，将 padding-bottom 设置为想要实现的 height 的值。同时将其 height 设置为 0 以使元素的“高度”等于 padding-bottom 的值，从而实现需要的效果。
此时CSS代码如下：
div {
float: left;
margin: 10px 5%;
padding-bottom: 20%;
width: 20%;
height: 0;
}
这里宽高比是1比1，实现的是正方形，并且实现同比缩放。
####### 用vh单位
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="ui-square-nerd">
</div>
<div class="ui-square">
</div>
</body>
</html>
css:
.ui-square-nerd {
width: 20%;
height: 0;
padding-bottom: 20%;
background: blue;
}
.ui-square {
margin-top: 30px;
width: 20vh;
height: 20vh;
background: green;
}
