微信小程序的图片宽高问题
之前发现“四季相框”小程序点击进相册的时候,点第一个图片,上面的按钮老是莫名其妙响应,开始以为是要清除浮动,加了clear:both,照旧。
检查代码后发现,原来在wxss文件里,写死了图标的宽度为32rpx(图标原始大小为100px),但并不限定高度,虽然视觉效果缩放了,但是高度还在,
.icon {
width:32rpx;
margin-right: 10rpx;
vertical-align: middle;
}
增加height:32rpx如下,搞定。
.icon {
width:32rpx;
height: 32rpx;
margin-right: 10rpx;
vertical-align: middle;
}
这里wxss和传统css有一点不一样的,在传统css里若只设置宽度来缩小图片,一般来说图片会变形,但在wxss里不会,至少视觉效果上不会,但是也隐藏了一个问题,那就是,你点击的时候,会命中。