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