微信小程序图片等比例缩-放（图片自适应屏幕）

最新推荐文章于 2024-10-29 20:15:38 发布

hi_1900

最新推荐文章于 2024-10-29 20:15:38 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/Zinnir/article/details/128411838

1、wxml

<!--图片宽高大于屏幕宽高-->
<image style="width: {{imagewidth}}px; height: {{imageheight}}px;" src="{{imageSrc}}" bindload="imageLoad"></image>

2、wx.js

<!--图片宽高大于屏幕宽高-->
Page({
 data: {
  imageSrc: 'http://bpic.588ku.com/back_pic/00/03/85/1656205138bbe2d.png',//图片链接
  imagewidth: 0, // 缩放后的宽
  imageheight: 0, // 缩放后的高
 },
 onLoad: function () {
 },
 imageLoad: function (e) {
   var imageSize = this.imageUtil(e)
   this.setData({
     imagewidth: imageSize.imageWidth,
     imageheight: imageSize.imageHeight
   })
 },
 imageUtil: function (e) {
   var imageSize = {};
   var originalWidth = e.detail.width; // 图片原始宽
   var originalHeight = e.detail.height; // 图片原始高
   var originalScale = originalHeight/originalWidth; //图片高宽比
   //获取屏幕宽高
   wx.getSystemInfo({
     success: function (res) {
     var windowWidth = res.windowWidth;
     var windowHeight = res.windowHeight;
     var windowscale = windowHeight/windowWidth;//屏幕高宽比
     if (originalScale < windowscale) { // 图片高宽比小于屏幕高宽比
       //图片缩放后的宽为屏幕宽
       imageSize.imageWidth = windowWidth;
       imageSize.imageHeight = (windowWidth * originalHeight) / originalWidth;
     } else { // 图片高宽比大于屏幕高宽比
       //图片缩放后的高为屏幕高
       imageSize.imageHeight = windowHeight;
       imageSize.imageWidth = (windowHeight * originalWidth) / originalHeight;
     }
   }
  })
  return imageSize;
 }
})