微信小程序 —— 图片自适应后去掉底部的白边

最新推荐文章于 2024-07-09 21:30:00 发布
最新推荐文章于 2024-07-09 21:30:00 发布
阅读量1.8w 收藏 5
点赞数 3
分类专栏： 微信小程序 文章标签： 微信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Wu_shuxuan/article/details/78214627
版权
本文介绍了微信小程序中图片自适应时出现底部白边的问题，包括小图和长图两种情况。针对这个问题，作者提供了相应的解决代码，帮助开发者实现图片完美填充屏幕，消除视觉上的不适。
摘要由CSDN通过智能技术生成

在微信小程序中有一个图片的小bug，当一个image放到一个view中，或者是一个页面放入一个长长的image，宽度和高度的自适应很好实现，但是实现之后图片的底部依旧会有一个白边。

例如

- 小图（无需占满整个屏幕的）

这里写图片描述

这里写图片描述

解决代码


 - wxml
 <view class="free-images">
最低0.47元/天 解锁文章
「已注销」
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序图片底部留白的问题
沛哥儿的专栏
09-17 1964
前端不丰富。找了几个网上的例子，根据例子，实验得到解决方案如下。 1、将包裹的view增加display属性。值：display。 2、将image设置为垂直对齐模式。vertical-align:top，因为图片是要占满整个水平宽度的，设置mode="widthFix" 整个样式如下： <view style = 'display:flex;'> <image src='../../a.jpg' mode = 'widthFix' style = 'vertical...
微信小程序<image>标签底部留白问题
stephenli300203的博客
03-19 4488
序言 遇到小程序的或者html的标签，下方总会出现一道留白，有时候稀里糊涂就弄没了，为此专门了解了一下今天就详细讲解一下原因和解决方法 为什么会出现留白 image和img默认都是行内块元素，而他的vertical-align的属性默认为baseline,留白就是baseline和bottom之间的距离，如下图： baseline下面的就是出现在留白 详细了解vertical-align 上图一...
微信小程序 自定义底部导航栏（tabbar）
最新发布
H_ZMY的博客
07-09 695
底部导航栏 自定义导航栏
微信小程序使用图片标签出现白底
weixin_43321726的博客
02-22 737
在用mode="widefix"属性的时候，有时候会出现白底；在图片上加 margin-bottom:-1rpx;
微信小程序开发—背景图片全屏（无白条）
m0_46776386的博客
11-29 2542
目录错误示例正确示例正确代码段 错误示例 微信小程序开发过程中，为了增加界面的美观程度，可以尝试将一张图片设置为背景。在网上最主要的方法为： index.wxml <view class="content"> <!--pics文件夹下的background.jpg文件--> <image class='background' src="/images/beijing.jpg" mode="aspectFill"></image> <!--页面
微信小程序 image标签 全屏之后下方有白色条
专栏
01-26 6357
最近开发微信小程序，遇见image全屏的问题，发现高度100%后图片还是无法铺满全屏，在屏幕最下方有一个白色的空白条，甚是难看，查来查去，发现居然是小程序自带的bug，所以决定用css来解决，代码如下： wxml： css： .main{ width: 100%; height: 100%; } image{ width:100%; height: 100%;
微信小程序图片拼接的时候底部留白的问题解决
lck8989的博客
11-08 6429
原文链接：传送门 1.给图片包裹元素加属性 position: relative;                                                                        //用弹性盒子让图片垂直排列 display: flex; flex-direction: column; 2.给图片本身加属性 1）vertical-align:top...
微信小程序——图片自适应 ，富文本解析（截图+源码）.zip
04-18
微信小程序——图片自适应 ，富文本解析（截图+源码）.zip 微信小程序——图片自适应 ，富文本解析（截图+源码）.zip 微信小程序——图片自适应 ，富文本解析（截图+源码）.zip 微信小程序——图片自适应 ，富文本...
微信小程序 图片宽度自适应的实现
08-30
在微信小程序中，图片宽度自适应的实现是一个常见的需求，特别是在设计响应式界面时，确保图片能在不同设备和屏幕尺寸上正确展示至关重要。本篇主要介绍如何在微信小程序中实现图片宽度自适应。 首先，我们需要了解...
微信小程序——电影推荐（截图+源码）.zip
04-17
微信小程序——电影推荐（截图+源码）.zip 微信小程序——电影推荐（截图+源码）.zip 微信小程序——电影推荐（截图+源码）.zip 微信小程序——电影推荐（截图+源码）.zip 微信小程序——电影推荐（截图+源码）.zip ...
微信小程序源码 图片自适应 ，富文本解析(学习版)
06-18
微信小程序源码 图片自适应 ，富文本解析(学习版)微信小程序源码 图片自适应 ，富文本解析(学习版)微信小程序源码 图片自适应 ，富文本解析(学习版)微信小程序源码 图片自适应 ，富文本解析(学习版)微信小程序源码 ...
微信小程序使用swiper制作轮播图留白的解决方法
刘先生倒了u的博客
08-23 2718
微信小程序相比网页制作轮播图快捷了很多，直接可以使用swiper标签，但是对于新手来说，也有很多不可避免的坑。 附上轮播图代码 <view class="swp"> <swiper style="height:220px;" indicator-dots="true" indicator-active-color="red" indicator-color="whi...
解决微信小程序的swiper轮播图右边留有空白
那朵花的博客
03-05 6660
解决办法：在image图片设置宽度100%，style='width:100%' &lt;swiper indicator-dots="{{true}}" autoplay="{{true}}"&gt; &lt;block wx:for="{{imgUrls}}" wx:key="*this"&gt; &lt;swiper-item&gt; &am
微信小程序自适应图片的时候底部总有一条白色的空白区像一条线该怎么办呢？
徐飞的博客
07-26 2624
微信小程序自适应图片的时候底部总有一条白色的空白区像一条线该怎么办呢？
微信小程序使用＜image＞标签引用图片，底部总有一条白边，解决方式
如果还热爱那就一直写下去吧~
09-14 814
【代码】微信小程序使用＜image＞标签引用图片，底部总有一条白边，解决方式。
uniapp微信小程序ios真机上测试页面下拉出现白边
zerlinda0913的博客
12-11 4333
解决方法一： 在page.json ,单个页面中的样式设置背景 全局设置
微信小程序-解决iOS系统下拉或者拖动整个页面出现白底问题【亲测有效】
热门推荐
**My Coding Family**
03-17 1万+
微信小程序-解决iOS系统下拉或者拖动整个页面出现白底问题【亲测有效】
小程序图片底部留白问题
qq_44381060的博客
12-03 2126
图片底部留白问题 问题 最近在写小程序的时候，发现图片的下方总是会留有空白，这是因为图片的默认样式是inline样式，而这个属性的vertical-align的默认值是baseline。所以就会出现上图的情况（图片底部出现一个小留白区域）。 解决方法 1.把img变成块状元素，所以是否需要留白，可以用过padding来设置 2.因为是img的vertical-align默认属性导致出现留白问题，所以直接修改vertical-align属性值为middle即可。 总结 但是自己使用的时候，发现上述
微信小程序——自定义底部tabBar
01-03
微信小程序可以通过自定义底部tabBar来实现更加个性化的界面效果。下面是一个示例代码，演示了如何自定义底部tabBar： ```javascript // app.json { "tabBar": { "custom": true, "color": "#000000", "selectedColor": "#FF0000", "backgroundColor": "#FFFFFF", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "images/home.png", "selectedIconPath": "images/home_selected.png" }, { "pagePath": "pages/category/category", "text": "分类", "iconPath": "images/category.png", "selectedIconPath": "images/category_selected.png" }, { "pagePath": "pages/cart/cart", "text": "购物车", "iconPath": "images/cart.png", "selectedIconPath": "images/cart_selected.png" }, { "pagePath": "pages/mine/mine", "text": "我的", "iconPath": "images/mine.png", "selectedIconPath": "images/mine_selected.png" } ] } } ``` 在上述代码中，我们通过设置`tabBar`字段为自定义模式，并指定了底部tabBar的颜色、选中颜色和背景颜色。然后，通过`list`数组指定了每个tab的页面路径、显示文本、未选中图标和选中图标。 需要注意的是，自定义tabBar的页面路径必须在`pages`字段中进行配置，且每个页面的`json`文件中都需要设置`"navigationBarTitleText"`字段，以保证在切换页面时能正确显示页面标题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值