uni-app image标签设置mode为top时顶部存在1像素留白
uni-app image标签设置mode为top时顶部存在1像素留白
操作步骤：
- 设置图片宽高和mode 然后查看顶部
预期结果：
- mode为top时不会出现顶部1像素留白
实际结果：
- mode为top时顶部会出现1像素留白的bug
bug描述：
- 附件中有图，mode为 top 时存在顶部1像素留白 mode为 aspectFill 时正常
| 信息类别 | 信息内容 |
|---|---|
| 产品分类 | uniapp/小程序/微信 |
| PC开发环境操作系统 | Windows |
| PC开发环境操作系统版本号 | 10.0.19041 |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 3.1.18 |
| 第三方开发者工具版本号 | 2.17.0 |
| 基础库版本号 | 2.16.1 |
| 项目创建方式 | HBuilderX |
更多关于uni-app image标签设置mode为top时顶部存在1像素留白的实战教程也可以访问 https://www.itying.com/category-93-b0.html
2 回复
经测试，使用模拟器和真机运行都没有发现此问题
更多关于uni-app image标签设置mode为top时顶部存在1像素留白的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这是一个已知的渲染对齐问题，在部分机型和小程序环境中会出现。当mode设置为top时，图片顶部可能产生1像素的留白。
解决方案：
-
使用
aspectFill替代：如你测试所见，aspectFill模式可以避免此问题，但需要注意图片可能被裁剪。 -
添加负边距修正：
.image-class {
margin-top: -1px;
}
- 使用
scaleToFill模式：配合object-fitCSS属性实现类似效果：
.image-class {
object-fit: cover;
}