示例代码：

<template>  
    <view class="pageBody">  
        <view class="articleBody">  
            <mp-html class="richBox" externStyle="richBox" :content="reArticleBody" :lazy-load="true"  
                :loading-img="nolist" :preview-img="false" />  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello',  
                articleBody: '<p class="ql-align-center"><img src="https://www.i-xiaohaibao.com/file/202107/3f63d4ce20c142b4a547383a18688f16.jpg"><img src="https://www.i-xiaohaibao.com/file/202108/287f83251c2a48b3b2f3e3e7bc11b52f.jpg"><img src="https://www.i-xiaohaibao.com/file/202108/04a4c48aa14646768039e7be299a71f9.jpg"><img src="https://www.i-xiaohaibao.com/file/202108/185067658d1e40b59b2b8fa8a75142a6.jpg"><img src="https://www.i-xiaohaibao.com/file/202108/922c0fd2ec0e4681a488191eb1372746.jpg"></p><p class="ql-align-center"><img src="https://www.i-xiaohaibao.com/file/202108/d431fe9b16a8403fab1cbf00953f99bf.jpg"></p>',  
                nolist: 'https://www.i-xiaohaibao.com/file/202108/b44dff568e9543a18e44ac2d04e203a1.png',  
            }  
        },  
        computed: {  
            reArticleBody() {  
                return this.articleBody.replace(  
                        /<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p')  
                    .replace(/<p>/ig, '<p style="font-size: 14px; line-height: 25px;">')  
                    .replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')  
                    .replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1')  
                    .replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1')  
                    .replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1')  
                    .replace(/<img([\s\w"-=\/\.:;]+)/ig,  
                        '<img style="max-width: 100%;vertical-align: bottom;display:block;margin:0 auto;" $1');  
            }  
        },  
    }  
</script>  

<style>  
    .pageBody {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
        width: 750rpx;  
        max-width: 750rpx;  
        padding: 30rpx;  
        box-sizing: border-box;  
    }  
    .articleBody{  
        width: 100%;  
        box-sizing: border-box;  
    }  
</style>

操作步骤：

复现

• demo项目：https://gitee.com/xuwenqian3146179006/bugdemo.git
• 文章详情页，一张竖向长图海报，经切片成多张小图片后，竖向排列渲染
• 每张图片，使用“widthFix”模式渲染，且将盒模型定义为“display:block”或“display:flex”；

  <image :style="'display:block;vertical-align: bottom;width:100%;height:1px;'" :src="'https://www.i-xiaohaibao.com/file/202107/3f63d4ce20c142b4a547383a18688f16.jpg'" mode="widthFix" />  
  <image :style="'display:block;vertical-align: bottom;width:100%;height:1px;'" :src="'https://www.i-xiaohaibao.com/file/202108/287f83251c2a48b3b2f3e3e7bc11b52f.jpg'" mode="widthFix" />  
  <image :style="'display:block;vertical-align: bottom;width:100%;height:1px;'" :src="'https://www.i-xiaohaibao.com/file/202108/04a4c48aa14646768039e7be299a71f9.jpg'" mode="widthFix" />  
  <image :style="'display:block;vertical-align: bottom;width:100%;height:1px;'" :src="'https://www.i-xiaohaibao.com/file/202108/185067658d1e40b59b2b8fa8a75142a6.jpg'" mode="widthFix" />  
  <image :style="'display:block;vertical-align: bottom;width:100%;height:1px;'" :src="'https://www.i-xiaohaibao.com/file/202108/922c0fd2ec0e4681a488191eb1372746.jpg'" mode="widthFix" />  
  <image :style="'display:block;vertical-align: bottom;width:100%;height:1px;'" :src="'https://www.i-xiaohaibao.com/file/202108/d431fe9b16a8403fab1cbf00953f99bf.jpg'" mode="widthFix" />

预期结果：

• image组件的widthFix模式下，计算的图片height参数值取整数；
• 以避免，多图累加产生小数点，并累加到下一张图中；
• 多张图，竖向排列后，紧密衔接在一起，使其看起来没有间隔；
• 图片允许不超过“0.5px”的伸缩误差；

实际结果：

• 第N张图的height值，经前几张图片height值小数点的累加，一旦超过“0.5px”，则会在图片底部出现空白间隙