CSS实现宽高成比例缩放

      用js实现一个宽度自适应，高度随着宽度变化而变化的矩形，相信你们确定都会。无非是js获取一下元素宽度，而后再计算出相应比例的高度，而后赋给元素，但若是要求只用CSS实现呢。

      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;
}

    效果http://jsfiddle.net/Doing93/9oLqyqha/

    接下来分析一下，到底是如何实现的。首先容器container块内包含了两个div，一个是dummy，这个纯粹是为了实现缩放效果加的，另外一个content里面放的是咱们真正想要展示的内容。其实原理也很简单，你们都知道div是块元素，它默认就是占一行，宽度原本就是自适应的，因此咱们须要作的是让它的高度能随宽度改变。在不使用js的前提下，靠的就是前面提到的dummy那个块来实现，dummy只设置了一个css属性，margin-top:100%，相信你们都反应过来了。由于容器宽度已经在那儿了，经过dummy块的margin-top来把整个的高度撑得和宽度同样，当容器宽度改变时，dummy的位置也会改变，进而容器高度就跟着发生了变化。

    可是，仍是会有个问题——外部容器发生了高度塌陷。而”高度塌陷“这个词你们确定都不是第一次听到，你们确定都处理过由于子元素浮动致使父元素高度塌陷，因此这里采用的方法也是相似清除浮动的方法，设置父元素display:inline-block或overflow:hidden。这里说个题外话，不知道你们在使用这两种方法清除浮动的时候有没有过疑问，为何给父元素这样设置以后就能把父元素高度撑起来呢，准确的原理解释起来有点复杂。能够简单的理解为，当子元素脱离文档流时，父元素不知道子元素的存在，因此致使高度塌陷。当设置父元素为display:inline-block或者overflow:hidden时，迫使父元素去检查本身内部有哪些子元素，而这时候就发现了以前absolute定位的子元素，因此高度就撑开了。

    这里给dummy块设置margin-top:100%，出来的是个可自适应缩放的正方形，若是须要长方形只须要更改此值便可，好比须要4:3的长方形，则应设为margin-top:75%。