微信小程序如何实现图像分量图像长宽比自适应显示的示例

示例介绍了微信小程序实现图像分量图像长宽比自适应显示的方法。分享给大家，供大家参考，详情如下：

1。了解图像组件

由于图像有标准的固定宽度和高度，我们很难自定义图像。我们一起来解决吧

2。方法

(1)。使用方式：widthFix

widthFix：宽度不变，高度自动变化，保持宽高比原有形象不变。
首先我们将图像模式设置为widthFix，然后给图像添加一个固定的rpx宽度，如：730rpx。

这样也可以自定义图片。 。因为rpx小程序本身就是一个自适应显示设备

(2)。使用bindload绑定功能进行动态定制。

我们可以将函数绑定到图像。通过这个函数，就像上面的bindload描述一样，我们可以获取原始图像的宽度和高度。

然后计算他们的宽高比率。 。然后设置一个宽度大小（rpx）最后通过style动态设置图片的宽度和高度。代码如下：

1。编写页面结构index.wxml：

<image  bindload="imageLoad"
style="width:{{imgwidth}}rpx; height:{{imgheight }}rpx;"></image>

2。设置数据index.js

//获取应用实例
var app = getApp()
Page({
  data: {
    screenWidth: 0,
    screenHeight:0,
    imgwidth:0,
    imgheight:0,
  },
  onLoad: function() {
    var _this = this;
    wx.getSystemInfo({
      success: function(res) {
        _this.setData({
          screenHeight: res.windowHeight,
          screenWidth: res.windowWidth,
        });
      }
    });
  },
  imageLoad: function(e) {
    var _this=this;
    var $width=e.detail.width,  //获取图片真实宽度
      $height=e.detail.height,
      ratio=$width/$height;  //图片的真实宽高比例
    var viewWidth=500,      //设置图片显示宽度，
      viewHeight=500/ratio;  //计算的高度值
    this.setData({
      imgwidth:viewWidth,
      imgheight:viewHeight
    })
  }
})

希望这篇文章对大家微信小程序开发有帮助。