uni-app image组件在widthFix模式下图片之间有空白缝隙

uni-app image组件在widthFix模式下图片之间有空白缝隙

信息类别 详情
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win7
HBuilderX类型 正式
HBuilderX版本号 2.9.11
手机系统 iOS
手机系统版本号 IOS 14
手机厂商 苹果
手机机型 ip7 plus
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<view style="background-color: #CB051A;margin: 0;padding: 0;" >  
    <image style="width: 100%; margin: 0;padding: 0;" mode="widthFix"  src="../../static/img/test.jpg"></image>  
    <image style="width: 100%; margin: 0;padding: 0;" mode="widthFix"  src="../../static/img/test.jpg"></image>  
    <image style="width: 100%;" mode="widthFix"  src="../../static/img/test.jpg"></image>  
    <image style="width: 100%;" mode="widthFix"  src="../../static/img/test.jpg"></image>  
</view>

操作步骤：

<view style="background-color: #CB051A;margin: 0;padding: 0;" >  
    <image style="width: 100%; margin: 0;padding: 0;" mode="widthFix"  src="../../static/img/test.jpg"></image>  
    <image style="width: 100%; margin: 0;padding: 0;" mode="widthFix"  src="../../static/img/test.jpg"></image>  
    <image style="width: 100%;" mode="widthFix"  src="../../static/img/test.jpg"></image>  
    <image style="width: 100%;" mode="widthFix"  src="../../static/img/test.jpg"></image>  
</view>

预期结果：

图片之间不应该有缝隙

实际结果：

图片直接有缝隙

bug描述：

uniapp image组件，widthFix 模式下，图片之间有空白缝隙，复现代码如下，复现图片在附件。

<view style="background-color: #CB051A;margin: 0;padding: 0;" >  
    <image style="width: 100%; margin: 0;padding: 0;" mode="widthFix"  src="../../static/img/test.jpg"></image>  
    <image style="width: 100%; margin: 0;padding: 0;" mode="widthFix"  src="../../static/img/test.jpg"></image>  
    <image style="width: 100%;" mode="widthFix"  src="../../static/img/test.jpg"></image>  
    <image style="width: 100%;" mode="widthFix"  src="../../static/img/test.jpg"></image>  
</view>


更多关于uni-app image组件在widthFix模式下图片之间有空白缝隙的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

外层加个 flex布局看看

更多关于uni-app image组件在widthFix模式下图片之间有空白缝隙的实战教程也可以访问 https://www.itying.com/category-93-b0.html


谢谢，加上flex可以了，没搞明白原理。

回复 7***@qq.com: inline-block水平呈现的元素间，换行显示会有间距。去除间隙参考

回复 DCloud_UNI_Anne: OK 怎么标记为不是bug

使用flexbox布局看一下

谢谢，加上flex可以了，没搞明白原理。

这是一个常见的图片间隙问题，主要是由于图片默认的display属性导致的。在uni-app中，可以尝试以下解决方案：

  1. 给父元素view添加font-size:0样式：
<view style="background-color: #CB051A;margin: 0;padding: 0;font-size:0">
  1. 或者给image组件设置display:block样式：
<image style="width:100%;display:block" mode="widthFix" src="../../static/img/test.jpg"></image>
  1. 也可以尝试设置vertical-align:top：
<image style="width:100%;vertical-align:top" mode="widthFix" src="../../static/img/test.jpg"></image>
回到顶部