css圖片響應式+垂直水平居中1

轉載請註明： TheViper http://www.cnblogs.com/TheViper 

效果

要求:

1.儘量兼容更多瀏覽器，這裏兼容到ie7,ie6不支持max-*就不考慮了。

2.瀏覽器尺寸變化時，圖片老是等比例拉伸或縮放。

3.包裹圖片的div也是響應式的，而且每一個div的尺寸是同樣的。

4.圖片始終保持水平垂直居中。

5.圖片的行列數不變，這裏一直都是3*3.

下面來搞定一個個要求。

知足要求1意味着這裏要儘可能不使用高級瀏覽器纔有的屬性，好比高級瀏覽器居中經常使用的什麼

display:table-cell;vertical-align;center;

flexbox

transform

。。。

若是不得不用這些屬性，也必需要有兼容低版本瀏覽器的替代方案。

要求2中圖片等比拉伸縮放在響應式設計中很容易搞定。

直接對圖片img{max-width: 100%;}就能夠了。外面的寬度就算設成比圖片寬度小的尺寸，圖片會填滿外面div,同時等比例的計算出圖片這時該有的高度。

能夠看到圖片尺寸是640*480(4:3),外面div設成300px,圖片尺寸這時變爲300*225(4:3).

而後是要求2裏面的瀏覽器尺寸變化。這個也容易，把外面div的寬度寫成百分百就能夠了。

能夠看到無論外面div尺寸怎麼變，圖片的寬高比始終沒變。

而後是要求3,外面div響應式。

第一反應是把尺寸設置成百分百。好比最上面的效果，一行有三張圖片。把每一個包裹圖片的div寬度設成33.3%;那這時div還會像裏面的圖片同樣，等比例縮放或拉伸，div的高度就會良莠不齊。

    <div id='wrap'>
        <ul>
            <li>
                <p><img src="1.jpg"></p>
            </li>
                       .....
        </ul>
    </div>

View Code

    *{
        margin: 0;
        padding:0;
    }
    li{
        list-style-type: none;
        display:inline-block;
        vertical-align: middle;
        max-width: 200px;
        width: 32%;
        border:1px solid red;
    }
    img{
        max-width: 100%;
        max-height: 100%;
        display: inline-block;
        vertical-align: middle;
    }
    #wrap{
        max-width: 620px;
        font-size: 0;
    }

View Code

能夠看到第一張圖片的高度已經超過200px,由於第一張圖片是寬度小於高度，很顯然這時應該以高度爲基準，寬度等比例縮放。若是在圖片父元素加overflow:hidden;就看不到大豬的豬腳了。

那麼到底怎麼作才能讓外面div響應式？

padding-top:100%;

    <div id='wrap'>
        <ul>
            <li>
                <div class="dummy"></div>
            </li>
                        ...
        </ul>
    </div>

View Code

    *{
        margin: 0;
        padding:0;
    }
    li{
        list-style-type: none;
        float: left;
        display: block;
        max-width: 200px;
        width: 32%;
        border:1px solid red;
    }
    .dummy{
        padding-top: 100%;
    }
    #wrap{
        max-width: 620px;
        font-size: 0;
    }

View Code

這裏寬高比是1:1.若是寬高比是4:3，就設成padding-top: 75%;，其餘的以此類推。

要求3是搞定，下面是要求4。

先把圖片放進去。

這時讓圖片脫離文檔流，並把圖片整個鋪滿。

    img{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: 100%;
        max-height: 100%;
        display: block;
        margin: 0 auto;
        border: 2px solid blue;
    }

同時把包裹圖片div position:relative;

注意到上面圖片margin:0 auto;,已經能夠水平居中了。

下面就只差一個圖片垂直居中了，要求5只需在最外面div設置一個max-width就能夠設置一行的列數了。

垂直居中有不少方法，可是這裏圖片position:absolute;，很容易想到設置margin:auto;padding:auto;就可讓脫離文檔流的圖片水平垂直居中。參見Absolute Horizontal And Vertical Centering In CSS。

可是這種方法對ie7無效。所以只有在圖片外面再加一層div.

這裏本屌用的是很常見的一種垂直居中的方法。

            <li>
                <div class="dummy"></div>
                <p><img src="1.jpg"><i></i></p>
            </li>

    img{
        max-width: 100%;
        max-height: 100%;
        display: inline-block;
        vertical-align: middle;
    }
    i{
        display: inline-block;
        vertical-align: middle;
        height:100%;
    }

注意，這時<p>標籤要設置height:100%.不然在ie7中，<i>標籤沒有能夠參照的高度，使得它沒法達到和外部容器同樣的高度。

最後附上下載