小程序
小游戏
企业微信
微信支付
扫描小程序码分享
小程序wxss设置图片的宽高**rpx，但是保存后页面加载出来是另一个尺寸，在控制台修改一下宽高的数据才能正常显示，咋回事
4 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
你好，这是一个已知问题，我们会尽快进行修复。
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
还有截图
请提供下代码
图片那个问题刚看了下自己好了。
现在是这个问题，给内联样式，使用rpx可以实现自适应，但是在样式表里面写实现不了。
<block wx:for="{{listItem}}">
<view class='list-item' style='width:340rpx;'>
<image src='{{item.imgUrls}}' mode='aspectFit' style='width:340rpx;height:340rpx;' ></image>
<view class='item-info'>
<view class='info-proname'>
<text class='info-ziying' wx:if="{{item.show}}">自营</text>
{{item.proname}}</view>
<view class='info-info'>
<text class='info-type'>{{item.infotype}}</text>
<text class='info-price'>￥{{item.infoprice}}</text>
</view>
</block>
wxss：
#list .list-item{
width: 340rpx;
height: 468rpx;
background: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-right: 20rpx;
margin-bottom: 20rpx;
}
.list-item image{
height: 340rpx;
.item-info{
padding: 28rpx 24rpx 28rpx 20rpx;
box-sizing: border-box;
.info-info{
margin-top: 20rpx;
.info-proname{
font-size: 28rpx;
color: #333333;
line-height: 28rpx;
.info-type{
font-size: 24rpx;
color: #999999;
line-height: 24rpx;
.info-price{
color: #ED5B5B;
.info-ziying{
width: 52rpx;
height: 28rpx;
border: 2rpx solid #19C0A3;
color: #19C0A3;
display: inline-flex;
justify-content: center;
align-items: center;
js：
listItem:[
{
"imgUrls":"../../images/ysp/36.png",
"proname":"小鱼(帆布包)",
"infotype":"林夕/单肩包",
"infoprice":"99",
"show":false
},
"imgUrls": "../../images/ysp/37.png",
"proname": "秋水系列(组合包)",
"infotype": "曹夕／组合",
"infoprice": "230",
"show": true
"imgUrls": "../../images/ysp/38.png",
"proname": "高山流水(桌摆)",
"infotype": "康熙／桌摆",
"infoprice": "2000",
"imgUrls": "../../images/ysp/39.png",
"proname": "水彩依稀(水杯)",
"infotype": "赵夕／水杯",
"infoprice": "78",
"show": false
"imgUrls": "../../images/ysp/36.png",
"proname": "小鱼(帆布包)",
"infotype": "林夕/单肩包",
"infoprice": "99",
]
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
你好，这是一个已知问题，我们会尽快进行修复。
还有截图
请提供下代码
图片那个问题刚看了下自己好了。
现在是这个问题，给内联样式，使用rpx可以实现自适应，但是在样式表里面写实现不了。
<block wx:for="{{listItem}}">
<view class='list-item' style='width:340rpx;'>
<image src='{{item.imgUrls}}' mode='aspectFit' style='width:340rpx;height:340rpx;' ></image>
<view class='item-info'>
<view class='info-proname'>
<text class='info-ziying' wx:if="{{item.show}}">自营</text>
{{item.proname}}</view>
<view class='info-info'>
<text class='info-type'>{{item.infotype}}</text>
<text class='info-price'>￥{{item.infoprice}}</text>
</view>
</view>
</view>
</block>
wxss：
#list .list-item{
width: 340rpx;
height: 468rpx;
background: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-right: 20rpx;
margin-bottom: 20rpx;
}
.list-item image{
width: 340rpx;
height: 340rpx;
}
.item-info{
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 28rpx 24rpx 28rpx 20rpx;
box-sizing: border-box;
}
.info-info{
display: flex;
justify-content: space-between;
margin-top: 20rpx;
}
.info-proname{
font-size: 28rpx;
color: #333333;
line-height: 28rpx;
}
.info-type{
font-size: 24rpx;
color: #999999;
line-height: 24rpx;
}
.info-price{
font-size: 28rpx;
color: #ED5B5B;
line-height: 28rpx;
}
.info-ziying{
width: 52rpx;
height: 28rpx;
border: 2rpx solid #19C0A3;
font-size: 24rpx;
color: #19C0A3;
line-height: 24rpx;
display: inline-flex;
justify-content: center;
align-items: center;
}
js：
listItem:[
{
"imgUrls":"../../images/ysp/36.png",
"proname":"小鱼(帆布包)",
"infotype":"林夕/单肩包",
"infoprice":"99",
"show":false
},
{
"imgUrls": "../../images/ysp/37.png",
"proname": "秋水系列(组合包)",
"infotype": "曹夕／组合",
"infoprice": "230",
"show": true
},
{
"imgUrls": "../../images/ysp/38.png",
"proname": "高山流水(桌摆)",
"infotype": "康熙／桌摆",
"infoprice": "2000",
"show": true
},
{
"imgUrls": "../../images/ysp/39.png",
"proname": "水彩依稀(水杯)",
"infotype": "赵夕／水杯",
"infoprice": "78",
"show": false
},
{
"imgUrls": "../../images/ysp/36.png",
"proname": "小鱼(帆布包)",
"infotype": "林夕/单肩包",
"infoprice": "99",
"show": false
},
{
"imgUrls": "../../images/ysp/37.png",
"proname": "秋水系列(组合包)",
"infotype": "曹夕／组合",
"infoprice": "230",
"show": true
},
]