移动端常用图片布局

效果： 

 

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