请教一下像微信朋友圈这个图片的wxss怎么写
类似这样的样子,图片的数量也是一样的最多9张 哪位大神能给帮助一下吗?
类似这样的样子,图片的数量也是一样的最多9张 哪位大神能给帮助一下吗?
朋友圈九宫格布局,只有一个难点儿,如何生成一个1:1的盒子,并且在不同屏幕上展示效果都正常。
可以去了解一下padding和margin的百分比是以什么为参照物~
详细demo看这个:
http://demos.pxuexiao.com/scale/wx.html
也可以考虑display: grid 布局
web 里最喜欢用的一个样式 就是 div{width:30%;padding:30% 0 0 0;background:no-repeat center;background-size:cover;float:left;position: relative;overflow: hidden;} div img{position: absolute;top:0;left:0;right:0;bottom:0;}
.main-content-imageList{
width: 100%;
display: flex;
flex-wrap: wrap;
}
.main-content-imageList-item{
margin-bottom: 6rpx;
width: 246rpx;
height: 246rpx;
line-height: 0;
position: relative;
}
.main-content-imageList-item:nth-child(3n+2){
margin-left: 6rpx;
margin-right: 6rpx;
}
感受一下