图片无缝拼接

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

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

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

 

bug复现图

bug描述：

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

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

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

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

bug说明：

当页面banner过长需要切成2张，或者一个主要由图片拼接而成的静态页面。在一些大屏手机上（如小米mix2、ipad等），可以明显的看到拼接的2张图之间有一条缝隙。

 

尝试过的解决方案：

1、2个div之间无margin,banner图作为div的背景图进行拼接，示例页面使用的是这种布局方法；结果：仍然有一条缝

2、banner图使用img元素，img转块将父元素撑开，父元素之间无padding、margin、border等，审查元素父盒子被img撑开，高度与img高度一致；结果：页面仍然有一条缝

3、使用vertical-align:top/text-top属性处理img元素，使之在父元素中置顶显示；结果：页面仍然有一条缝

可行的解决方案：

1、当图片拼接出现缝隙的时候，检查png格式切图是否有问题，可能png图片顶部有空白导致的；

2、当拼接的2张图片之间颜色一致时，使用margin-top：-1px的方法，此法简单粗暴，使用css即可解决问题

3、当页面图片色彩丰富切精细无法用方法2解决时，使用js，获取图片渲染后的高度，将高度设置为4的整倍数；此时图片之间的衔接就不会有缝隙了，并且不会存在明显的图片变形。

参考文章：https://blog.csdn.net/s12244315/article/details/48825037

 

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

tips:

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

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

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

 

转载于:https://www.cnblogs.com/qiujianmei/p/9285773.html