摘要：很多开发者在微信小程序开发过程中可能会遇到图片失真的问题，因为微信小程序的标签要设置为它的宽高，否则如果图片的宽高超过了微信原图的大小. 我们经常会看到如下图标： 但是固定的宽高设置会导致一些...

很多开发者在开发微信小程序的过程中可能会遇到图片失真的问题，因为微信小程序的标签要设置为它的宽高，否则如果图片的宽高超过了微信原图的大小。我们经常看到以下图标：

但是，如果宽度和高度设置固定，有些图片会与指定显示图片大小的比例不一致，导致失真。

为此，想办法。当图片加载成功时，会触发一个事件。通过这个事件，我们可以得到图片的宽高。然后问题就解决了。我们可以得到图像的原始宽度和高度。然后计算它的比例，根据要求固定图片的宽度（或高度），再根据比例计算出对应的高度（或宽度）。原理是这样的，把代码放在下面：

中创建的 js 文件，暴露其接口：

function imageLoad(e,zhi,img,or) { var windowWidth=0; wx.getSystemInfo({ success: function(res) { console.log(1); windowWidth=res.windowWidth; } }) var $width=e.detail.width, //获取图片真实宽度 $height=e.detail.height, //获取图片的真实高度 ratio=$width/$height; //图片的真实宽高比例 // console.log(e); if(or=='height'){ var viewWidth=zhi*ratio, //设置图片显示宽度 viewHeight=zhi; if(viewWidth/2>windowWidth){ console.log("你的图片已经超过屏幕宽度"); } }else{ var viewWidth=zhi, //设置图片显示宽度 viewHeight=zhi/ratio; } var image=img; //将图片的datadata-index作为image对象的key,然后存储图片的宽高值 image[e.target.dataset.index]={ width:viewWidth, height:viewHeight } return image; } module.exports = { imageLoad: imageLoad }

并在js中添加代码：

在 wxml 中添加代码：

但是，这种方法有一个缺点微信小程序开发之图片等比例缩放，有些人可能无法接受：

取值完成后必须显示图片，所以会有延迟

以上是如何解决微信小程序开发过程中图片失真的问题？更多详情请关注php中文网其他相关文章！