微信小程序的图片宽高问题

之前发现“四季相框”小程序点击进相册的时候,点第一个图片,上面的按钮老是莫名其妙响应,开始以为是要清除浮动,加了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里不会,至少视觉效果上不会,但是也隐藏了一个问题,那就是,你点击的时候,会命中。

微信小程序 图片缩放
阅读(232) 评论(0) 5 个月前