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

袁应_ACMer_大龄打铁蒟蒻

于 2021-09-17 17:03:56 发布

阅读量2.4k

点赞数

分类专栏：小程序文章标签： css 小程序

本文链接：https://blog.csdn.net/qq_36545095/article/details/120352708

版权

小程序专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种用于展示多个图片的布局样式实现方案，通过灵活调整图片尺寸和布局方式，使得不同数量的图片都能以美观的形式展示。适用于各种需要批量显示图片的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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