CSS -- 图片宫格不变形显示

最新推荐文章于 2024-01-27 21:11:36 发布

liayn523

最新推荐文章于 2024-01-27 21:11:36 发布

阅读量1.7k

点赞数

分类专栏： CSS3 文章标签： CSS 图片显示相册不变形 figure

本文链接：https://blog.csdn.net/liayn523/article/details/73740072

版权

CSS3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

最近在项目中需要实现类似手机相册的功能，照片九宫格显示，且不管什么样大小的照片显示都不会变形的功能，废话不多说，直接看代码：

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;
}

效果图如下：