说明
以下方式可以直接拷贝到浏览器运行，缩放拖动浏览器大小即可观看效果。
一、 利用定位实现
<!doctype html>
<html>
<style>
.wrapper{
position : relative;
background: #ccc;
width: 10%;
padding-bottom : 20%;
}
.inner{
position : absolute;
top : 0; left : 0; right : 0; bottom : 0;
}
</style>
<head>
<body>
<div class="wrapper">
<div class="inner">
这是内容
</div>
</div>
</body>
</html>
其中奥妙就在于padding-bottom:20%, padding-bottom 是相对宽度的.也就是整个Wrapper的高度等于padding-bottom 的高度,Wrapper没有内容高度.没有内容高度如何往其中放置我们准备的DIV呢?答案是 绝对定位, 所以Wrapper的样式中有position:relative, 方便子元素相对Wrapper的左顶点定位。
二、利用伪元素
<!doctype html>
<html>
<style>
.wrapper {
background: #ccc;
width: 10%;
}
.wrapper::before {
content: '';
padding-top: 200%;
float: left;
}
.wrapper::after {
content: '';
display: block;
clear: both;
}
</style>
<head>
<body>
<div class="wrapper">
这是内容
</div>
</body>
</html>
该方法来自：30 Seconds of CSS。
padding-top 在wrapper上::before 伪元素使元素的高度等于其宽度的百分比。200%因此表示元素的高度始终为200%的宽度，创建一个响应正方形。 此方法还允许内容正常放置在元素内部。
总结
二种方式实现的效果都一样，大家可以试一下，调整浏览器窗口的大小以查看元素的比例保持不变。
个人推荐使用方法二，这样可以减少div的嵌套。不过方法一的兼容更好
参考:http://www.fly63.com/article/detial/1291?type=3