微信小程序 图片自适应

来源:互联网 发布:淘宝价格数字字体 编辑:程序博客网 时间:2024/06/13 06:33

创建一个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 
}
阅读全文
1 0
原创粉丝点击