小程序实现图片宽度高度等比例缩放，图片自适应的方式

<!--index.wxml-->

<!--图片宽大于屏幕宽-->

<image style="width: {{imagewidth}}px; height: {{imageheight}}px;"  src="{{imagefirstsrc}}" bindload="imageLoad"></image>

<!--图片高大于屏幕高-->

<!--<image style="width: {{imagewidth}}px; height: {{imageheight}}px;"  src="{{imagesecondsrc}}" bindload="imageLoad"></image>-->

<!--图片宽高大于屏幕宽高-->

<!--<image style="width: {{imagewidth}}px; height: {{imageheight}}px;"  src="{{imagethirdsrc}}" bindload="imageLoad"></image>-->

//index.js

//获取应用实例

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

var app = getApp()

Page({

  data: {

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

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

    imagethirdsrc:'http://img1.gtimg.com/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

    })

  }

})

//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

}

HiShop小程序工具提供多类型商城/门店小程序制作，可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。

更多小程序开发案例，尽在：http://www.hishop.com.cn/xiaocx/kaifa.html
 

小程序显示图片相关文章：

小程序加载图片如何实现

小程序开发上传图片如何实现

小程序上传图片组件及上传多张图片