小程序图片 mode 设置为 widthFix 图片显示瞬间竖向拉伸变形闪烁

最新推荐文章于 2024-04-03 16:42:47 发布
最新推荐文章于 2024-04-03 16:42:47 发布
阅读量9k 收藏 8
点赞数 2
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37935725/article/details/109293917
版权

官方文档中 mode="widthFix"   宽度不变，高度自动变化，保持原图宽高比不变，即设置图片宽度而高度自适应。

但是在实际开发中发现图片在初始加载时瞬间竖向拉伸变形闪烁然后恢复正常宽高，也许是高度没设置的原因。

所以把图片设置  

height: auto

即可解决问题

 

不忘初心才得始终
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序 image 组件 小程序图片宽高显示 mode属性设置
夜阑珊妖妖
12-06 4155
微信小程序官方 image组件：https://developers.weixin.qq.com/miniprogram/dev/component/image.html 1.图片 宽100% 高auto，不变形； mode=“widthFix” <image class="vidimg" mode="widthFix" src="{{item.thumbnail}}" alt="" ...
微信小程序动态设置图片大小的方法
12-13
我们都知道微信小程序的组件image是用来显示图片的，它有一下几个属性： 1、src              图片资源地址 2、mode          图片裁剪、缩放的模式 3、binderror     当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: ‘something wrong’} 4、bindload     当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:’图片高度px’, width:’图片宽度px’} 但是image有默认的固定的宽度和高
微信小程序行间mode=“widthFix“ 的意思
Q196825的博客
06-04 3104
官方文档中比如图片行间加 mode="widthFix" 代表宽度不变，高度自动变化，保持原图宽高比不变，即设置图片宽度而高度自适应。（若图片加载出现闪烁，可给图片加height：auto）
image的mode[scaleToFill、aspectFit、aspectFill、widthFix、heightFix ]使用区别
最新发布
有一种信仰叫海阔天空
04-03 389
image的mode[scaleToFill、aspectFit、aspectFill、widthFix、heightFix ]使用区别
小程序开发填坑《一》图片显示不全的问题
03-29
直入主题： 对于一张网络图片高度太高，而显示不全如何解决？     其实我一贯的观点是，所有的问题从api中都能够找到答案，只是有时候缺少耐 心，而没有好好去读官方api,出现问题后着急的google、百度、github... 下面我们来看下api 怎么说的： image 图片。 属性名 类型 默认值 说明 src String   图片资源地址 mode String 'scaleToFill' 图片裁剪、缩放的模式 binderror HandleEvent   当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'somethin
微信小程序实现image组件图片自适应宽度比例显示的方法
01-20
本文实例讲述了微信小程序实现image组件图片自适应宽度比例显示的方法。分享给大家供大家参考，具体如下： 一. 了解image组件 由于image有默认的固定的宽度和高度，这样我们在做图片自适应的时候，就不好做了。下面就来一起解决下 二. 方法 (一).使用mode：widthFix widthFix：宽度不变，高度自动变化，保持原图宽高比不变。 首先我们先设置image的mode为widthFix，然后给图片加一个固定rpx的宽度，比如：730rpx。 这样图片也可以自适应了。。因为小程序的rpx本身就是一个自适应显示的单位 (二).使用bindload绑定函数动态自适应。 我们可以给im
image中mode=“widthFix“的意思
Falsify_的博客
07-25 2495
是可以根据图片的宽度自适应图片高度。
关于小程序widthFix图片高度不能自适应的问题
Coder_KellySha的博客
10-09 3294
微信小程序 Image 图片实现宽度100%或设置成某个rpx的值例如520rpx，高度自适应要如何设置呢？ 一般做法如下： 样式设置宽度100%， .img{ 　　width: 100%; } 在图片组件上添加属性mode="widthFix"<image class="img" src="../../images/hello.png" mode="widthFix"> 即...
微信小程序-图片宽高自适应设置
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-26 1万+
微信小程序中，有很做组件都是有默认宽高的，比如，image组件默认宽度320px、⾼度240px，这些默认设置常常会对我们的页面布局造成影响 <!-- mode="widthFix" 让图片占满宽度，等比例缩放高度 --> <image src="xxxx" mode="widthFix"></image> 所以，在使用image标签的时候，最常用的方法就是设置其 mode，例如用widthFix，...
WeChat微信小程序image组件aspectFill：保留中部 等比例变化 Widthfix：宽度为指定的  高度依据原图的宽高比进行变化
思维小刀
09-29 1916
aspectFill aspectFill 与 widthfix 都是保持宽高比不变 aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。 也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 aspectFill同样保持图片的宽高比不会变形。但它让图片完全填满整个容器，类似于scaleToFill这种模式。 不同的是，scaleToFill会改变图片的宽高比，而aspectFill不会。 用我们提到的“容器”的观点来理解aspectFill。 既然as
微信小程序使用widthFix或heightFix时先加载并显示原始图片的大小后再进行缩放导致出现短暂错位的问题
m0_50865164的博客
08-14 1992
我们知道，在微信小程序的image组件中，有widthFix属性和heightFix属性,但是，使用了这两种属性后，在页面加载的过程中会先将图片的原始尺寸显示出来再进行缩放，这样会导致与image组件同处一个盒子的其他组件出现短暂的错位，影响界面美观。 解决方法：  在wxss样式中将图片的初始高度或宽度置为0即可(使用widthFix则将高度置为0,heightFix则将宽度置为0)。代码如下: /* image的 mode为 widthFix */ image { height: 0; } /
微信小程序图片宽100%显示并且不变形
12-29
微信小程序图片宽100%显示并且不变形 按照HTML习惯进行写，代码： <view class=meiti> <image src=http://10.0.0.171:9001/images/2017/0619/20170619115150713_progressive.jpg xss=removed></image> </view> 效果如下： 很明显变形了 找到一篇关于微信小程序 图片的信息 //www.jb51.net/article/116771.htm 在图片上加上 mode=”widthFix” 代码如下： <view cla
微信小程序使用image组件显示图片的方法【附源码下载】
11-28
本文实例讲述了微信小程序使用image组件显示图片的方法。分享给大家供大家参考，具体如下： 1、效果展示 2、关键代码 ① index.wxml 复制代码 代码如下:<image xss=removed mode=”scaleToFill” src=”{{imageSrc}...
微信小程序image组件中aspectFill和widthfix模式应用详解
热门推荐
weixin_33700350的博客
06-17 1万+
aspectFill 与 widthfix 都是保持宽高比不变 aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 aspectFill同样保持图片的宽高比不会变形。但它让图片完全填满整个容器，类似于scaleToFill这种模式。不同的是，scaleToFill会改变图片的宽高比，而aspect...
小程序中图片自适应宽度比例显示的方法
kiku
09-06 4194
我们都知道微信小程序的组件image是用来显示图片的，它有一下几个属性： 1、src 图片资源地址 2、mode 图片裁剪、缩放的模式 3、binderror 当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: ‘something wrong’} 4、bindload 当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:’图片高度px’, width:’图片宽度px’} 但是image有默
image 标签 中的 mode=“widthFix“ 属性
weixin_49393290的博客
11-25 5000
这个属性可以根据图片高度自适应
小程序image图片mode=“widthFix“图片显示瞬间竖向拉伸变形闪烁解决办法
酸狗的博客
09-11 9856
在微信小程序给图片设置了宽度，然后设置了mode=“widthfix”,但是发现有的手机上会出现第一次进入页面加载图片的瞬间，图片会被拉的很长，然后恢复正常。然后把图片的高度也设置rpx的话，就不会出现这种情况了，所以小程序里图片需要设置高度。 官方文档中 mode=“widthFix” 宽度不变，高度自动变化，保持原图宽高比不变，即设置图片宽度而高度自适应。 但是在实际开发中发现图片在初始加载时瞬间竖向拉伸变形闪烁然后恢复正常宽高，也许是高度没设置的原因。 所以需要在app.wxss全局中把图片设.
【uni-app】小程序使用getImageInfo和widthFix实现图片按自身尺寸展示
徐海东的博客
03-23 6979
场景：uni-app编译微信小程序图片在不设定高度宽度样式时有默认宽高（如下图），即使设置了image图片的mode属性也无法让图片按自身宽高展示。这种场景在非固定宽高的渲染网络图片时会遇到 思路：使用uni.getImageInfo方法获取图片信息宽高，然后再赋值渲染 #uni.getImageInfo(OBJECT) OBJECT 参数说明 参数名 类型 必填 说明 src String 是 图片的路径，可以是相对路径，临时文件路径，存储文件路
微信小程序，图片mode属性详解
Jooan的博客
02-28 3390
微信小程序，图片mode属性详解
微信小程序 图片横向显示
06-08
微信小程序中可以使用 `image` 组件和 CSS 样式来实现图片横向显示，具体步骤如下： 1. 在 `wxml` 文件中，使用 `image` 组件来显示图片。设置 `mode` 属性为 `widthFix`，表示保持宽度不变，高度自适应。 ```html <image src="{{imageUrl}}" mode="widthFix"></image> ``` 2. 在 `wxss` 文件中，使用 CSS 样式来控制图片的宽度和高度。设置图片的宽度为页面宽度，高度为自适应。 ```css image { width: 100%; height: auto; } ``` 3. 修改页面的 `json` 配置文件，设置页面的背景色为白色，以便更好地显示图片。 ```json { "navigationBarTitleText": "图片横向显示", "backgroundColor": "#ffffff" } ``` 完整的示例代码如下： ```html <!-- index.wxml --> <image src="{{imageUrl}}" mode="widthFix"></image> ``` ```css /* index.wxss */ image { width: 100%; height: auto; } ``` ```json // index.json { "navigationBarTitleText": "图片横向显示", "backgroundColor": "#ffffff" } ``` 需要注意的是，在实际使用中，如果图片宽度过大，可能会导致页面加载速度变慢，影响用户体验。因此，在选择图片时需要注意图片大小和质量，以便更好地显示和加载。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值