css解决图片之间衔接有空隙的方法，css解决图片之间白线的方法

2015 年 12 月 5 日2015 年 12 月 5 日 by 沧海之树 In 工作, 网络基础技术

图片之间衔接产生空隙的原因：
手机网站为了兼容各种不同手机屏幕尺寸，图片基本上都要进行伸缩处理，比如640px宽度的图片在iphone6下面只有412px宽度，宽度一旦被压缩，为了图片不变形，相应的高度也会有变化，一般情况下我们会这么写：
<img src="images/con1.jpg" style="width:100%; border:none;" >
这种写法在目前主流的浏览器下面，基本上都会出现一道跟背景色相同的线，如果没有设置背景色的话，那就是一条白线。
如下图：

解决办法：

在图片中添加vertical-align:bottom; 属性，如下格式：
<img src="images/banner02.jpg" style="width:100%; border:none;vertical-align:bottom;" >
这样就得到解决了，如下图：