Css 实现自适应正方形

阅读 (2589)
曾经用到过这种写法,主要用于手机端,仿app上的九宫格菜单,要求是方形,又要自适应,简单记录下

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>

实际效果:

更新于:2018-07-19 15:22:37
返回顶部