小程序图片拉伸缩放一闪而过bug

项目中发现,有的图片在刚进入时会出现拉伸,之后还原的过程。发现是图片高度没有设置的问题。当设置mode='widthFix’模式时,往往忘记设置高度,把height值设置为auto解决。

.express-img {
	widht:20px;
	height:auto;
}
  <image class='express-img' mode='widthFix' src="..." />
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
你可以通过以下步骤来实现小程序图片的等比缩放展示: 1. 获取图片的原始尺寸和展示区域的尺寸。可以使用小程序的API获取图片的宽度和高度,或者通过CSS样式获取展示区域的宽度和高度。 2. 计算图片缩放比例。根据展示区域的尺寸和图片的原始尺寸,可以计算出图片需要缩放的比例。比例可以通过以下公式计算: 缩放比例 = Math.min(展示区域宽度 / 图片原始宽度, 展示区域高度 / 图片原始高度) 3. 应用缩放比例。将计算出的缩放比例应用到图片上,可以通过CSS样式设置图片的宽度和高度,使其等比缩放到适合展示区域的尺寸。 例如,使用小程序的wx.getImageInfo获取图片信息,然后通过setData方法将图片宽度、高度和缩放比例保存到data中,在wxml文件中使用动态绑定设置图片样式: ```javascript // 在小程序页面的js文件中 Page({ data: { imgWidth: 0, imgHeight: 0, scale: 1 }, onLoad: function() { var that = this; wx.getImageInfo({ src: '图片路径', success: function(res) { var imgWidth = res.width; var imgHeight = res.height; var windowWidth = wx.getSystemInfoSync().windowWidth; var windowHeight = wx.getSystemInfoSync().windowHeight; var scale = Math.min(windowWidth / imgWidth, windowHeight / imgHeight); that.setData({ imgWidth: imgWidth, imgHeight: imgHeight, scale: scale }); } }) } }) // 在小程序页面的wxml文件中 <image src="图片路径" style="width:{{imgWidth*scale}}px; height:{{imgHeight*scale}}px;"></image> ``` 以上就是一个简单的例子,可以根据实际需求进行修改和扩展。希望能对你有所帮助!如果有任何问题,请随时提问。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值