uniapp解决图片底部留白

最新推荐文章于 2024-04-01 11:36:13 发布
最新推荐文章于 2024-04-01 11:36:13 发布
阅读量3.5k 收藏 4
点赞数 2
分类专栏： uniapp image 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43513271/article/details/121031841
版权

使用u-image 组件图片底部会有大概10px的留白

在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述

我写的是宽度撑满,高度自适应,就出现了上面情况

解决方法

在这里插入图片描述
意思大概就是,垂直底部对齐,想要了解vertical-align的属性,可以看另一位博主的文章vertical-align描述

在这里插入图片描述解决了

uniapp之消除图片的空白占用空间
知码客
04-17 662
我们在使用uniapp开发的过程中一定会遇到一个情况就是我们加载的图片总有一点空白出现在不该出现的地方代码如下。是不是很烦人，代码感觉一点问题都没有，那么我们如何去解决这个问题，下面就来说一下其实这个问题解决起来也简单。写在最后还是需要我们去自己去亲身实践，多多敲敲试试总会有意想不到的效果。其实重要的就是在外围的容器上面加上。
uni-app - 刘海屏(Iphone X)底部横杠(——)白色区域块（安全距离处更改颜色）解决方案
热门推荐
王二红
12-02 1万+
场景：因为要做无tabbar页面，所以在配置文件中取消底部导航栏。取消后，iPhoneX(刘海屏)底部就出现如下图所示白色安全区域问题：这个问题，是因为uni-app默认会为iPhoneX(刘海屏)留出安全距离，这个安全距离的背景色就是白色。所以，如果你将页面颜色设置为其他颜色，就会与默认白色冲突。有2个不同的解决方案(原生占位)，虽然原理是一样，但使用的场景不同，请根据您的需求来采纳。
UniApp 解决image背景图片下方有10rpx 的白边
weixin_50236740的博客
03-05 1044
【代码】UniApp 解决image背景图片下方有10rpx 的白边。
uniapp image 底部留白
qq_43529068的博客
04-22 777
//两个选一个即可 display: flex; vertical-align:bottom; inline-block水平呈现的元素间，换行显示会有间距
uniapp设置tabBar后，页面底部有留白。
明耀的博客
06-12 5339
manifest.json>app启动页配置>等待首页渲染完毕后再关闭Splash图，打勾解决。 应该是uniapp启动时候渲染页面的bug。
去除uniapp微信小程序顶底部滑动留白
最新发布
zcc88999的博客
04-01 963
去除uniapp微信小程序顶底部滑动留白
uniapp安卓手机底部留白
08-26
关于UniApp在安卓手机底部出现留白的问题，可能是由于安卓系统的虚拟导航栏所致。虚拟导航栏是一种虚拟按键，位于屏幕底部，用于替代传统的物理导航按键。在使用UniApp开发时，由于安卓手机的不同，虚拟导航栏的高度...
uniapp 做的app在iphone12上屏幕高度底部留白
10-26
在iPhone 12上，Uniapp制作的应用...通过以上措施，应该能够解决Uniapp应用程序在iPhone 12上底部留白的问题。如果问题仍然存在，您可能需要进一步查找Uniapp的文档或与Uniapp社区寻求帮助，以获取更具体的解决方案。
uniapp上拉底部露白
09-12
解决这个问题的一个方法是使用padding-top来替换margin-top，将页面内容的高度撑起来，这样上方的留白就解决了。这个方法适用于H5app和uniapp。另外，你还可以通过获取系统信息的方法来解决这个问题。在vue中，可以...
uniapp popup关闭底部安全区
05-30
在Uniapp中，关闭弹出层时，可以通过监听 `@close` 事件来实现底部安全区的恢复。具体可以在 `@close` 事件中，获取弹出层元素并设置其样式，移除底部安全区的留白。例如： ```html ...
uniapp小程序页面图片拉到底部留白
qq_38359034的博客
12-09 544
在图片css样式里写入 vertical-align: middle;
解决在uniapp上开发移动端项目时，因为后台传入的图片渲染到前端出现图片白条的情况
TX9271000911的博客
07-15 1053
最后一步在小程序上找到你出现bug图片所在的位置，找到xxx.wxss文件并删除多余的东西。这是小编在使用uniapp开发小程序时出现的问题，下面教小伙伴们怎么解决。解决bug的方法很多，如果这个帮不了你，可以看看其它小编的理解。解决方案使用正则表达式进行一个替换。删除后面的.dataxxxxx。ctrl+s一下大功告成。...
uniapp使用自定义底部导航栏时，打包安卓端，底部出现一段空白
weixin_43952634的博客
01-13 1631
uniapp使用自定义底部导航栏时，打包安卓端，底部会出现一段空白，此时在pages.json文件的tabBar配置里面，加入height：1px。空白本质上是原生的底部导航栏，默认会有一段高度，使用自定义时，因要设置一级页面，所以原生导航栏也存在，无法读取0px 所以设置1px 会有条横线。
uniapp 页面设置高度百分百，当页面超过百分百的时候底部会出现一块白色解决方案
qq_42628556的博客
04-08 2092
使用scroll-view包裹，并且给scroll-view设置高度100%
惨痛的uniapp 背景图片 踩坑....
Coco_chun的博客
07-23 1万+
传送门1：https://blog.youkuaiyun.com/weixin_43343144/article/details/90300788 传送门2：https://blog.youkuaiyun.com/pucker/article/details/90475788 这种可以使用本地图片设置背景 我的背景图上下都会留白无法全屏： 现在只找到了app上的解决方案： 布局使用 padding-top替换...
uniapp-微信小程序page底部有空白，高度随内容自适应，底部无法固定
weixin_47338877的博客
04-14 2610
uniapp-微信小程序page高度随内容自适应，底部有空白，底部无法固定 欢迎使用Markdown编辑器 在做微信小程序时，page如果没有设置最小高度，那么高度会随着内容而自适应，但是需求是在底部有一个按钮，无论页面内容如何变化，都位于内容的最下面。 如果只是撑大page 若page高度<100% 那么按钮只是在page底部而不是屏幕 刚开始想到的是绝对定位，但放下如果page的内容过多，会覆盖到按钮上。 代码 page{ height: 100%; } .tmpl_mobile{
UniApp开发Android全面屏让底部导航栏透明
Coding My Way
04-21 3482
使用UniApp开发安卓的程序的时候，全面屏的手机的底部导航栏，默认不是透明的，而是带颜色的背景。一般设置成和背景色一样的颜色，假装它是透明的。但是当页面内容多的时候，能够超过底部，就会看起来会特别奇怪，它的背景会遮盖页面内容。所以想设置为彻底透明的。
uni-app为什么image底部填充不满以及解决办法
青衫折扇的博客
09-25 2120
哦们这次先来看看bug图: 解决办法: image: { display: block; } 最后我们看下完美图: 问题完美解决,有什么问题请下方留言,关注我,谢谢大家的支持
三种方式去除img标签图片底部默认空白
Orange71234的博客
08-31 798
方法3：将img的父元素的行高设置为0（以上代码的父元素为class="content"的div）方法2：设置img中的vertical-align属性值为middle。2.图片vertical-align属性的默认值是baseline。1.图片的display属性默认是inline。方法1：把img变成块级元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值