微信群聊生成九宫格形式的头像 css （小程序，vue需改动wxml少量代码）

<view class="item-img">
  <image class="item-img-img{{item.voucher_image.length>9?9:item.voucher_image.length}}" wx:if="{{idx<9}}" wx:for="{{item.voucher_image}}" wx:for-item="it" wx:for-index="idx" wx:key="idx" src="{{it}}"></image>
</view>

.item .item-img {
  width: 580rpx;
  height: 580rpx;
  border-radius: 6rpx;
  font-size: 34rpx;
  color: #0D0E15;
  overflow: hidden;
	display: flex;
	justify-content: center;
	flex-wrap: wrap-reverse;
	align-items: center;
	align-content: center;
	justify-items: center;
	background-color: rgb(221,222,224);
	flex:none;
}
.item .item-img  image{
	background-color: rgb(240, 240, 241);
}
.item-img-img1{
	height: 98%;
	width: 98%;
}
.item-img-img2,.item-img-img3, .item-img-img4{
	justify-self: center;
	height: 46%;
	width: 46%;
	margin: 1%;
}
.item-img-img5,.item-img-img6,.item-img-img7,.item-img-img8,.item-img-img9{
	height:31.16666%;
	width: 31.16666%;
	margin: 1%;
}

效果：