【不是Bug】uniapp image组件，widthFix 模式下，图片之间有空白缝隙

分类：uni-app

bug反馈不是bug

产品分类： 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>

2020-12-10 09:07 负责人:无分享

2 个回复

uniapp追随者

外层加个 flex布局看看

7***@qq.com (作者)

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

2020-12-10 09:15
DCloud_UNI_Anne

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

2020-12-10 12:02
7***@qq.com (作者)

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

2020-12-11 09:43

chenli

使用flexbox布局看一下

7***@qq.com (作者)

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

2020-12-10 09:15

该问题目前已经被锁定, 无法添加新回复

【不是Bug】uniapp image组件，widthFix 模式下，图片之间有空白缝隙

预期结果：

图片之间不应该有缝隙

实际结果：

图片直接有缝隙

bug描述：

2 个回复

公告

相关问题

【不是Bug】uniapp image组件，widthFix 模式下，图片之间有空白缝隙

预期结果： 图片之间不应该有缝隙

实际结果： 图片直接有缝隙

bug描述：

与内容相关的链接

2 个回复

公告

相关问题

预期结果：

图片之间不应该有缝隙

实际结果：

图片直接有缝隙