uni-app 多张图片使用widthFix方式渲染时图片的height参数产生多位小数点 图片采用block方式显示 小数点经多张前图片的height值累加后会在某张图片底部出现空白间隙

uni-app 多张图片使用widthFix方式渲染时图片的height参数产生多位小数点 图片采用block方式显示 小数点经多张前图片的height值累加后会在某张图片底部出现空白间隙

项目信息 详情
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 Windows 10
HBuilderX类型 正式
HBuilderX版本号 3.2.5
第三方开发者工具版本号 1.05.2108130
基础库版本号 2.18.0
项目创建方式 HBuilderX

示例代码：

<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: '

', nolist: 'https://www.i-xiaohaibao.com/file/202108/b44dff568e9543a18e44ac2d04e203a1.png', } }, computed: { reArticleBody() { return this.articleBody.replace( /<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p') .replace(/

/ig, '

') .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](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" />

更多关于uni-app 多张图片使用widthFix方式渲染时图片的height参数产生多位小数点 图片采用block方式显示 小数点经多张前图片的height值累加后会在某张图片底部出现空白间隙的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

复制代码之后没发现有间隙的情况出现呢？有没有你的bug预览图？

更多关于uni-app 多张图片使用widthFix方式渲染时图片的height参数产生多位小数点 图片采用block方式显示 小数点经多张前图片的height值累加后会在某张图片底部出现空白间隙的实战教程也可以访问 https://www.itying.com/category-93-b0.html


要在小程序中复现，H5端没问题（亲测过）

在第N张图后，出现空白间隙

1、取巧的方案：给每张图片添加：“margin-top:-0.5px;”
---- 方案来源于uniapp的mp-html插件作者提供

这个问题是由于图片使用widthFix模式时，浏览器计算出的高度值包含多位小数，多个图片的height值累加后导致布局出现微小间隙。

解决方案：

  1. 使用CSS修正：为图片容器添加overflow: hidden或设置line-height: 0
.articleBody {
  line-height: 0;
}
  1. 调整图片样式：将图片的vertical-align改为top或middle
.replace(/<img([\s\w"-=\/\.:;]+)/ig, 
    '<img style="max-width: 100%;vertical-align: top;display:block;margin:0 auto;" $1');
  1. 使用flex布局修正：为图片父容器设置display: flex; flex-direction: column;
.richBox {
  display: flex;
  flex-direction: column;
}
  1. 使用transform修正：为图片添加transform: translateZ(0)触发GPU加速
.replace(/<img([\s\w"-=\/\.:;]+)/ig, 
    '<img style="max-width: 100%;vertical-align: bottom;display:block;margin:0 auto;transform: translateZ(0);" $1');
回到顶部