自適應正方形

關於自適應問題想了一天，查資料發現幾種實現方法，我以爲兼容性最好的就是利用padding實現

實現原理上代碼

<div class="row">
                <div class="col-md-3 col-sm-3">
                    <div class="gallery">
                        <a href="#"></a>
                    </div>
                </div>
                <div class="col-md-3 col-sm-3">
                    <div class="gallery">
                        <a href="#"></a>
                    </div>
                </div>
                <div class="col-md-3 col-sm-3">
                    <div class="gallery">
                        <a href="#"></a>
                    </div>
                </div>
                <div class="col-md-3 col-sm-3">
                    <div class="gallery">
                        <a href="#"></a>
                    </div>
                </div>
            </div>

樣式代碼：

.gallery {
    background-image: url(http://1.su.bdimg.com/skin/19.jpg) ;
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    margin-top: 10px;
    padding-bottom: 100%; /* 關鍵就在這裏 */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.gallery a {
    display: block;
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
}

這樣就實現了，其實就是用padding的設置是根據當前元素寬度計算這一原理實現，以後a標籤只是撐開實現點擊div各個區域有連接的功能。

 參考文章：http://www.tuicool.com/articles/UbIzuau