问题描述：在h5 中 把一张图片切成多张图片，然后再页面中显示拼接成一张图片.
正常情况：图片 设置成这样，在正常手机上没有问题
width: 100%;
display: block;
谷歌浏览器调试100% 没有问题
设置成125%
就会出现
这种缝隙，
部分机型会出现（小米手机）
h5 img 多张图片拼接一张图片有缝隙
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
分享- 邀请回答
-
3条回答 默认 最新
yanzhi_2016 2019-01-17 11:50关注我记得是给图片加上margin-top: -1px;可以解决。
本回答被题主选为最佳回答 , 对您是否有帮助呢?评论 打赏解决 1无用举报 分享
- 2019-01-17 10:05回答 3 已采纳 我记得是给图片加上margin-top: -1px;可以解决。
- 2021-09-18 00:39回答 4 已采纳 可以用canvas绘制成图片后保存，下边是代码，请根据平台进行修改，微信小程序可能需要下载图片,因为你是两张图所以我就不写绘制文字的代码了画布(canvas)对象有一个非常有用的方法:toDataUR
- 2021-08-08 18:10回答 1 已采纳 参考这篇 vue中img的src动态赋值（本地图片的路径） https://www.jianshu.com/p/6ee27c825025
- 2022-10-14 15:14qq_43635742的博客 最近接触到了生成分享海报需求，有多张动态图片合成一个分享海报，由于是h5需要加载静态资源，很多时候生成的海报图片都不完整，img.onerror又不报错，发现如果是img.onload完成之后，canvas就可以写进去，但是img....
- 2021-09-12 17:04回答 1 已采纳 可以使用html2canvas库
- 2021-05-27 13:55回答 6 已采纳 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="vi
- 2016-06-01 13:18回答 2 已采纳 需要WebView添加支持 ``` mWebView.setWebChromeClient(new WebChromeClient() { @Override
- 2020-11-16 15:34不是吧！的博客 解决：HTML页面中div框架图片拼接中间存在缝隙问题 修改之前代码如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title>图片</title> </head> <body...
- 2022-07-20 17:59回答 3 已采纳 使用localStorage本地存储可以实现 <!DOCTYPE html> <html lang="en"> <head> <meta char
- 2017-07-13 02:10回答 5 已采纳 ## 自己解决了 ### 问题原因: 在rem转换成px时难免有小数存在，在宽高比较小时候图片就会出现高度或者宽度解析问题。 ### 解决方案 1. 采用整数 px 绘制元素宽高（不是很推荐）
- 2019-07-22 08:56回答 3 已采纳 没有找到更好的解决办法，因为没法和安卓端面对面沟通，最后建议安卓端内核用腾讯的x5，完美解决兼容问题
- 2017-07-07 14:35Lily猫的博客 最近做h5的项目，碰到了一个百思不得其解的问题 后来百度查了一番，大致了解了原因，是因为浏览器把元素当成了字，空隙是给一些对齐字母后仍然长出一截的（例如j,g）预留的。也找到了几种解决方法，亲测可行。1，...
- 2019-01-04 22:38回答 2 已采纳 用H5的canvas代替img啊，先把图片画到canvas里面，再在canvas里用strokeRect()方法画框 ``` ```
- 2020-10-25 13:20偶吼吼吼的博客 解决图片缝隙</title> <style> img { margin: 50px auto; border: 2px solid #000; } </style> </head> <body> <img src="../img/hh.jpg" alt=""> <img src=".
- 2018-10-18 15:25Jerry丶Hu的博客 两年前刚接触移动端开发，刚开始比较疑惑，每次遇到问题都是到社区里提问或者吸取前辈的经验分享，感谢热衷于分享的开发者为前端社区带来欣欣向上的生命力。本文结合先前写的文章和开发经验分享给大家，希望也能帮助...
- 没有解决我的问题, 去提问
