image组件底部有空白,这可能是小程序自身的bug,对image设置vertical-align为任意值即可消除。


更新时间:2019-06-22

一直以来对小程序image组件底部空白的理解是错误的,以前以为是inline-block元素底部自带的一点空白,现在在用到image的时候发现其实不是的。

小程序image组件有一个默认的高度:240px,如果image组件不设置mode,并且高度不够240px,底部就会出现空白。

消除image组件空白有两种方法:设置合适的mode、设置固定高度

比如,要图片宽度是100%,高度自适应,就可以这样设置:

<image mode='widthFix' src='xxxx.png'></image>

经过实验发现,给image设置height: auto会导致图片高度为0,所以不能通过重置高度来消除空白,只能设置固定的高度,比如:height: 100%height: 40px等。


更新时间:2019-06-26

image垂直排列的时候,image的宽度是100%modewidthFix,底下依然会有空白,这就是我在开头的时候遇到的情况了。

标签: 微信小程序

添加新评论