微信小程序图片高度无法撑满父容器

最新推荐文章于 2024-01-30 13:50:11 发布
最新推荐文章于 2024-01-30 13:50:11 发布
阅读量1.3k 收藏
点赞数 3
分类专栏： 小程序 文章标签： 微信小程序 容器 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42356513/article/details/123142161
版权

问题描述

在这里插入图片描述
在view标签里面加image标签,view标签的宽是有的,但是高度没有,image标签的宽度我给了100%,但是我发现了一个问题,就是image标签底部跟view标签底部是有一个细小的距离的,真是奇了个大怪啊。

解决方案

外层容器view标签加个display:flex属性

疯狂的夏铭予
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
小程序 、h5图片铺满div，自适应容器大小
qq_41913971的博客
03-17 3309
图片铺满div，自适应容器大小，不会拉伸变形 小程序 1. image组件的mode属性： scaleToFill：缩放模式，不保持纵横比，图片拉伸至填满 image 元素 aspectFit： 缩放模式，保持纵横比，保证图片的长边能完全显示出来。 aspectFill： 缩放模式，保持纵横比，保证图片的短边能完全显示出来，长边截取。 widthFix： 缩放模式，宽度不变，高度自动变化，保持原图...
微信小程序中使元素占满整个屏幕高度实现方法
01-03
微信小程序中使元素占满整个屏幕高度实现方法 在项目中经常要用到一个容器元素占满屏幕高度和宽度，然后再在这个容器元素里放置其他元素。 宽度很简单就是width:100% 但是高度呢，我们知道的是height:100%必须是在父...
小程序图片作为背景图无法铺满的问题
mango339的博客
10-21 2619
设置完成之后，发现了新问题，图片依旧没有铺满，后来发现是由于屏幕高度很高，出现滚动条，网上找了一下解决方案把图片容器的position设置为fixed，这样虽然是铺满屏幕了，但是拖动的时候，背景图是不会跟着一起下滑的，这种体验感并不好，也不是我们想要的效果，pass。今天做小程序的时候，遇到一个问题，用一张图片去作为背景图的时候，图片总是铺不满屏幕，后来查阅一番后原来image标签的mode要设置为 widthFix，高度设置为100%；
小程序莫名其妙的问题--03：image元素高度超过view元素，导致图片显示在view外面
随便写写
11-27 2633
2019年11月27日 10:30:05 小程序莫名其妙的问题–03：image元素高度超过view元素，导致图片显示在view外面 出现问题截图： 图片太靠外了， 解决方法： 给页面image元素设置长度和高度， 使之填充包含iamge的元素 image{ width: 100%; height: 100%; border: 1rpx solid red; } 效果： 注： 因...
小程序定位引起view高度不能由内容撑开的问题？
weixin_44058522的博客
09-03 2781
注：#getheight为view绑定的id命名 // 获取view的高度 windowWidth: ‘’, scroll_height: ‘’, // 获取系统宽度 getSystemInfo: function() { let that = this wx.getSystemInfo({ success: function(res) { console.log(‘res.windowWidth...
微信小程序 CSS 解决子元素图片在父元素div宽高小的时候超出div范围
ZPD_zpd的博客
04-13 868
今天写小程序的时候发现了这么个问题，在div内添加了图片，给div一个边框，然后我就发现我的图片不在div的范围内了，而是向下偏移了一点 html： <view class="tel"> <image src="/images/tel.png"></image> </view> css： .container .content .person .per .tel { width: 30rpx; height: 30rpx; border:
微信小程序--view填充整个页面
weixin_44531304的博客
04-03 3835
在页面中我们要将某个元素填充整个页面， 可以使用height:100%，前提是给定父元素的高度，在普通的html中可以将body或者html的高度赋值为height:100%，接下开才可以在其中的子元素使用height：100%来设置高度 但是在微信小程序中根节点是page，所以我们需要对page赋值height：100%，再对其中的view赋值height：100%即可 ...
微信小程序图片瀑布流布局demo
05-06
在这个“微信小程序图片瀑布流布局demo”中，我们将会探讨如何在微信小程序中实现图片的瀑布流展示，这是一种常见的网页和移动应用设计模式，尤其适用于图片分享和展示类应用。 瀑布流布局，又称为无限滚动或荷叶边...
微信小程序动态设置图片大小的方法
10-15
在微信小程序中，为了实现图片的自适应显示，开发者经常需要动态设置图片的大小。本文主要探讨了两种方法来处理这一问题，适用于那些需要按原图比例显示图片，特别是在商品详情页等场景。 首先，我们可以利用`mode`...
微信小程序图片右边加两行文字的代码
10-15
在微信小程序开发中，有时我们需要将图片与文字结合展示，例如让图片位于右侧，而文字则在图片旁边。本篇文章将详细讲解如何实现这一功能，通过具体的WXML和WXSS代码示例，帮助开发者更好地理解和应用。 首先，我们...
微信小程序之swiper轮播图中的图片自适应高度的方法
08-27
微信小程序Swiper轮播图图片自适应高度方法 微信小程序中的Swiper轮播图是非常常用的功能，但是官方提供的示例中，Swiper的高度是固定的150px，这样如果传入的图片大于这个高度就会被隐藏。为了解决这个问题，我们...
微信小程序 - image 宽高自适应(图片无法自适应撑开标签)
卡尔特斯
10-23 2853
微信小程序中的 image 标签跟 html 中的 img 标签还是有些差别的。 image 标签有 src、mode 等属性基本够用 但是今天在用的时候发现设置 src 之后，image 在小程序中是默认有宽高的，也就是固定的，去掉宽高之后，也不会像 html 中的 img 标签一样图片内容会撑开标签，这里就需要自己来根据图片的大小进行手动自适应图片宽高了。 使用 bindload 绑定函数动态自适应，我们可以获取到原图的宽度和高度，计算他们的宽高比率，然后设置一个宽度大小（rpx），最后..
解决微信小程序swiper轮播图撑不满有留白 实现swiper轮播图撑满父容器
最新发布
JU_OLG的博客
01-30 1131
微信小程序开发swiper轮播图两边有留白的现象，设法将它充满
微信小程序——image图片组件宽高自适应方法（可详细了！）
热门推荐
朕的博客
03-12 3万+
微信小程序——images图片组件宽高自适应方法 前言： 第一次做小程序的时候使用了image图片组件，src引用一张图片后，给图片的样式设置了width:100%，发现图片变形了~~~，我想要的效果是，图片在父级中的宽是占据父级元素的100%，高度自动适应，按照html中的图片在浏览器中默认显示逻辑应该是，图片宽度为图片的100%宽度像素，高度自适应，所以这种显示逻辑并不会造成图片变形，思虑片刻...
关于父元素如何占满一屏的问题（小程序兼容iphonex的实例讲解）
宝贝QY的博客
08-14 512
小程序特殊问题处理方法
微信小程序学习笔记——wxss使view填充整个页面
yytoo2的博客
06-20 1万+
在页面中我们要将某个元素填充整个页面，使用height:100%，前提是给定父元素的高度，在普通的html中可以将body或者html的高度赋值为100%，接下开才可以在其中的子元素使用height：100%来设置高度 但是在微信小程序中根节点是page，所以我们需要对page赋值height：100%，再对其中的view赋值100%即可
关于弹性盒子的一个bug（父盒子宽度）
sha虫剂的博客
05-07 1543
最近，在给一个刚开始学前端的朋友解决bug的时候发现了一个关于弹性盒子的bug，这个bug大多数人可能都会忽略，故而分享一下，希望大家不会再踩坑。 先上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" cont...
微信小程序：使用image标签做背景图片并铺满屏幕
m0_64393334的博客
04-17 2105
【代码】微信小程序：使用image标签做背景图片并铺满屏幕。
微信小程序让image图片居中显示和铺满全屏幕的方法
美奇软件开发工作室
10-24 1万+
wxml <view class='imagesize'> <image src="/images/1.png" mode="widthFix"> </image> </view> wxss 1、图片水平居中（屏幕顶部）： .imagesize{ display:flex; //flex布...
微信小程序限制图片显示高度top模式
04-28
微信小程序中，可以通过设置图片的mode属性来控制图片的显示方式。其中，mode="top"可以使图片的高度固定，宽度自适应，并且将图片的顶部对齐父容器的顶部。 如果需要设置图片的最大高度，可以使用CSS样式的max-height属性。例如，可以在图片的父容器中设置max-height属性，来限制图片的最大高度。 示例代码如下： ```html <view style="max-height: 200rpx;"> <image src="图片地址" mode="top" style="width: 100%;"></image> </view> ``` 上述代码中，通过设置父容器的max-height属性为200rpx，来限制图片的最大高度。同时，设置图片的mode属性为"top"，使其高度固定，宽度自适应，并且顶部对齐父容器的顶部。最后，设置图片的宽度为100%，使其自适应父容器的宽度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值