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%。
使用img标签，给它的width属性设定一个绝对数量值，其高度就会自动按照width的值进行缩放了。如：
<img alt="" src="imgs/图片.jpg" width="1000" />
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>测试页面</title>
<style type="text/css">
div {
width: 600px
text-align: center
font-size: 4em
color: #333
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(function() {
var r = document.body.offsetWidth / window.screen.availWidth
$(document.body).css("-webkit-transform","scale(" + r + ")")
})
$(window).resize(function() {
var r = document.body.offsetWidth / window.screen.availWidth
$(document.body).css("-webkit-transform","scale(" + r + ")")
})
</script>
</head>
<body>
<div>改变窗口大小试试，你会发现什么？</div>
</body>
</html>
