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%。