CSS實現寬高成比例縮放

標籤：style   blog   http   color   os   使用   io   ar   div   

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

CSS實現寬高成比例縮放