移动端常用图片布局

最新推荐文章于 2022-07-10 12:00:52 发布

fire-fire-fox

最新推荐文章于 2022-07-10 12:00:52 发布

阅读量324

点赞数

本文链接：https://blog.csdn.net/wangrong111222/article/details/108929090

版权

效果：

1，

// 利用padding-top 拉出一个正方形 

                width: 33.3333%;
				padding-top: 33.3%;
				height: 0;

2，

// 利用上下左右定位， 来拉到最中间 ， 调整距离 对元素进行缩放     

               position: absolute;
					left: 5px ;
					top: 5px ;
					bottom: 5px;
					right: 5px;

完整代码：

.feedbacl-img-box{
			display: flex;
			flex-wrap: wrap;
			padding: 10px;
			.feedbacl-img-item{
				position: relative;
				width: 33.3333%;
				padding-top: 33.3%;
				height: 0;
				//background: red;
				box-sizing: border-box;
				.image-box{
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					left: 5px ;
					top: 5px ;
					bottom: 5px;
					right: 5px;
					overflow: hidden;
					image{
						width: 100%;
						height: 100%;
					}
					
				}
			}
			
		}