期望的是下圖
實際的是下圖
多了一條間隙
解決代碼:在該圖片的.wxss里加一句display: flex;
若圖片是通過wxParse解析的,則在wxParse.wxss中找到.wxParse-img,加上display: flex;
原理:盒模型不同造成的
默認設置為標准盒模型,box-sizing:content-box,即采用標准模式解析計算,盒子的總寬度/高度=width/height+padding+border+margin;我們css里設置的寬高值只包括最中心的content。
當設置為box-sizing:border-box時,將采用怪異模式解析計算,盒子設置的總寬度/高度,盒子總寬度/高度=width/height + margin;我們css里設置的寬高值已經包括了content+padding+border。
display: flex;的作用就是讓圖片的盒模型使用怪異模式。