图片无缝拼接

前段时间做需求一直被一个问题困扰,就是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的整倍数,重新赋值

 

posted @ 2018-07-09 20:03  喵小Q  阅读(1007)  评论(0编辑  收藏  举报