html代码如下，
<div class='container'>
<div class='dummy'></div>
<div class='content'>content</div>
</div>
css代码如下,
复制代码
.container{
background-color: silver
width:100%
position:relative
display: inline-block
}
.dummy{
margin-top: 100%
}
.content{
position:absolute
left:0
right:0
top:0
bottom: 0
}
有什么问题你可以去《5 1r gb》看看里面的论坛
接下来分析一下，究竟是如何实现的。首先容器container块内包含了两个div，一个是dummy，这个纯粹是为了实现缩放效果加的，另一个content里面放的是我们真正想要展现的内容。其实原理也很简单，大家都知道div是块元素，它默认就是占一行，宽度本来就是自适应的，所以我们需要做的是让它的高度能随宽度改变。在不使用js的前提下，靠的就是前面提到的dummy那个块来实现，dummy只设置了一个css属性，margin-top:100%，相信大家都反应过来了。因为容器宽度已经在那儿了，通过dummy块的margin-top来把整个的高度撑得和宽度一样，当容器宽度改变时，dummy的位置也会改变，进而容器高度就跟着发生了变化。-《http://v.youku.com/v_show/id_XMTMzMjg3MTU3Ng==.html?f=26081534》-
但是，还是会有个问题——外部容器发生了高度塌陷。而”高度塌陷“这个词大家肯定都不是第一次听到，大家肯定都处理过因为子元素浮动导致父元素高度塌陷，所以这里采用的方法也是类似清除浮动的方法，设置父元素display:inline-block或overflow:hidden。这里说个题外话，不知道大家在使用这两种方法清除浮动的时候有没有过疑问，为什么给父元素这样设置之后就能把父元素高度撑起来呢，准确的原理解释起来有点复杂。可以简单的理解为，当子元素脱离文档流时，父元素不知道子元素的存在，所以导致高度塌陷。当设置父元素为display:inline-block或者overflow:hidden时，迫使父元素去检查自己内部有哪些子元素，而这时候就发现了之前absolute定位的子元素，所以高度就撑开了。
这里给dummy块设置margin-top:100%，出来的是个可自适应缩放的正方形，如果需要长方形只需要更改此值即可，比如需要4:3的长方形，则应设为margin-top:75%。
css3有两个新单位，vw和vh,vw表示占用父元素宽度的百分比，vh表示父元素高度的百分比，如20vw表示元素宽度为父元素宽度的百分之二十，你设置宽度和高度都为20vw，就能实现正方形的效果。不过有个bug，就是现在浏览器对css3的支持度不是很大，有些浏览器不支持vh: 相对于视窗的高度, 视窗被均分为100单位的vh
vw: 相对于视窗的宽度, 视窗被均分为100单位的vw
vmax: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
vmin: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin
视区：所指为浏览器内部的可视区域大小，
即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。
calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。
calc是 css3提供的一个在css文件中计算值的函数：
用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 “+”, “-“, “*”, “/” 运算；
calc()函数使用标准的数学运算优先级规则；
calc(100vh - 10px) 表示整个浏览器窗口高度减去10px的大小
calc(100vw - 10px) 表示整个浏览器窗口宽度减去10px的大小
一般用来设置流式布局宽高，当然，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值
calc()的兼容性需要注意
