Css 实现自适应正方形

css 部份

.square {
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding: 0;
    position: relative;
    text-align: center;
}
.square::after {
    content: "";
    display: block;
    margin-top: 100%;
}
.square a {
    color: #333333;
    font-size: 13px;
    left: 0;
    position: absolute;
    width: 100%;
}
.square img {
    display: block;
    margin: 10% auto 0;
    max-width: 60% !important;
}

html部份

<div class="row">
<div class="col-xs-4 square"><a href="#link"><img alt="" src="/upload/files/images.jpg" /> 文字描述</a></div>

<div class="col-xs-4 square"><a href="#link"><img alt="" src="/upload/files/images.jpg" /> 文字描述</a></div>

<div class="col-xs-4 square"><a href="#link"><img alt="" src="/upload/files/images.jpg" /> 文字描述</a></div>
</div>

实际效果：