自适应正方形

关于自适应问题想了一天，查资料发现几种实现方法，我以为兼容性最好的就是利用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