前段时间做需求一直被一个问题困扰，就是banner图无缝拼接的兼容问题，尤其在一些大屏手机上很容易复现这个问题。

于是各种搜索，期望能找到解决办法，然而网上提供的诸如给img设置display:block;添加vertical-align:top;的方法完全解决不了问题。

下面提供一个自己摸索出来的方法，供大家参考，如果大家有更好的方法，或者清楚其原理的，欢迎交流学习！

bug复现图

如上图：可以看到banner图被切成了2张，拼接的地方有一条线；通常图片拼接有缝的时候，我们会想到一个简单暴力的方法，给下面的图片设置margin-top:-1px;但是这个图不适用，会导致图片衔接处有明显的变形；

于是我在电脑模拟器上手动调试图片的高度，起初我认为让图片自适应宽度的时候，高度auto,不同的机型解析高度，可能为小数导致的。实则不然，因为手机解析为小数，浏览器最终还是会取整。因此不是浏览器解析的问题，也不是机型像素差异的问题。既然高度是整数为什么还会有缝？这个图的实际高度是544px，我手动改为400px，发现缝竟然没了，于是我1像素1像素调整，发现遇到4的整倍数的时候，缝就会消失。

于是，我用js代码获取图片高度，判断当高度不为4的倍数的时候，把高度加高为4的整倍数，尝试后发现在能复现bug的手机上，问题解决了。

但是个别手机，快速拖动图片或者手动强制放大屏幕的时候还是可以看到这个缝。但是正常的用户正常的浏览页面的时候，问题可以说基本是上是解决了。

下面是代码：（粘上我的源码，仅供参考）

tips:

1、必须在图片onload之后才能获取到图片的高度，否则为0；

2、图片onload之后不要获取地址中的图片高度，要获取dom渲染后的图片自适应高度

3、如果图片的高度不是4的整倍数，重新赋值

说的比较图略，仅供学习交流！

关于为什么一定要是4的倍数，这个查了一些资料，没有查到；希望知道原理的小伙伴指点迷津！（笔芯❤）