小程序图片等比例缩放怎么设置？

　　之前小编使用小程序的时候发现会存在图片小于或者超出小程序页面的情况，如果在开发小程序的时候进行小程序图片等比例缩放的设置就可以避免这个情况了，以下是操作步骤。

　　老规矩,先上图.

　　1.图片高宽比小于屏幕高宽比

　　2.图片高宽比大于屏幕高宽比

　　3.这种其实也是图片高宽比小于屏幕高宽比,但是高宽都大于屏幕高宽.所以不能简单用高宽来判断,应该是用高宽比判断后做缩放.

　　上代码:

　　index.js

　　[javascript] view plain copy//index.js

　　//获取应用实例

　　var imageUtil = require('../../utils/util.js');

　　var app = getApp()

　　Page({

　　data: {

　　imagefirstsrc: 'bpic.588ku/back_pic/00/03/85/1656205138bbe2d.png',//图片链接

　　imagesecondsrc: 'bpic.588ku/back_pic/04/07/63/28581203949ca9d.jpg!/fw/400/quality/90/unsharp/true/compress/true',//图片链接

　　imagethirdsrc:'img1.gtimg/ent/pics/hv1/13/71/2061/134034643.jpg',

　　imagewidth: 0,//缩放后的宽

　　imageheight: 0,//缩放后的高

　　},

　　onLoad: function () {

　　},

　　imageLoad: function (e) {

　　var imageSize = imageUtil.imageUtil(e)

　　this.setData({

　　imagewidth: imageSize.imageWidth,

　　imageheight: imageSize.imageHeight

　　})

　　}

　　})

　　3.util.js

　　[javascript] view plain copy//util.js

　　function imageUtil(e) {

　　var imageSize = {};

　　var originalWidth = e.detail.width;//图片原始宽

　　var originalHeight = e.detail.height;//图片原始高

　　var originalScale = originalHeight/originalWidth;//图片高宽比

　　console.log('originalWidth: ' + originalWidth)

　　console.log('originalHeight: ' + originalHeight)

　　//获取屏幕宽高

　　wx.getSystemInfo({

　　success: function (res) {

　　var windowWidth = res.windowWidth;

　　var windowHeight = res.windowHeight;

　　var windowscale = windowHeight/windowWidth;//屏幕高宽比

　　console.log('windowWidth: ' + windowWidth)

　　console.log('windowHeight: ' + windowHeight)

　　if(originalScale < windowscale){//图片高宽比小于屏幕高宽比

　　//图片缩放后的宽为屏幕宽

　　imageSize.imageWidth = windowWidth;

　　imageSize.imageHeight = (windowWidth * originalHeight) / originalWidth;

　　}else{//图片高宽比大于屏幕高宽比

　　//图片缩放后的高为屏幕高

　　imageSize.imageHeight = windowHeight;

　　imageSize.imageWidth = (windowHeight * originalWidth) / originalHeight;

　　}

　　}

　　})

　　console.log('缩放后的宽: ' + imageSize.imageWidth)

　　console.log('缩放后的高: ' + imageSize.imageHeight)

　　return imageSize;

　　}

　　module.exports = {

　　imageUtil: imageUtil

　　}

　　参照以上的步骤和相关小程序代码，小程序图片等比例缩放就设置完成了，是不是很简单呢?设置之后，大家在使用小程序的时候就能获得更好的体验了，更多资料请关注微信小程序商店。

　　小程序图片跳转功能设置步骤

　　怎么实现微信小程序图片轮播?

　　如何实现小程序图片预览?