最近在项目中需要实现类似手机相册的功能,照片九宫格显示,且不管什么样大小的照片显示都不会变形的功能,废话不多说,直接看代码:
HTML:
<ul class="confirmphotos" ng-if="item.dynamicpics.length != 0 ">
<li ng-repeat="dynamicpic in item.dynamicpics">
<figure style="background-image:url({{apolloip}}{{dynamicpic.picaddress}})" ng-click="showBigImage(apolloip+dynamicpic.picaddress)" >
<a href="#"></a>
</figure>
</li>
</ul>
CSS:
.confirmphotos{
width: 100%;
background: #FFF;
padding-left: 3%
}
.confirmphotos:after{
content: "";
display: block;
clear: both;
height: 0;
overflow: hidden;
visibility: hidden;
}
.confirmphotos li{
list-style: none;
float: left;
width: 27.5%;
margin: 0 4% 2% 0;
position:relative;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.confirmphotos figure{
position: relative;
width: 100%;
height: 0;
overflow: hidden;
margin: 0;
padding-bottom: 100%; /* 关键就在这里 */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.confirmphotos figure a{
display: block;
position: absolute;
width: 100%;
top: 0;
bottom: 0;
}
效果图如下: