How to implement adaptive display of image component pictures in WeChat applet

This article mainly introduces the method of WeChat applet to realize the adaptive width ratio display of images in the image component. It briefly describes the common attributes of the image component, and analyzes the correlation of WeChat applet to realize the adaptive width ratio of images in the form of examples. For operating skills, friends in need can refer to

This article describes the example of the WeChat applet to implement the adaptive width proportion display of the image component picture. Share it with everyone for your reference, the details are as follows:

1. Understand the image component

Because of image There are default fixed width and height, which makes it difficult for us to adapt the image. Let’s solve it together

2. Method

(1). Use mode: widthFix

widthFix: The width remains unchanged and the height changes automatically, keeping the aspect ratio of the original image unchanged.
First we set the image mode to widthFix, and then add a fixed rpx width to the image, such as: 730rpx.

This way the picture can also be adapted. . Because the rpx of the mini program itself is an adaptive display unit

(2). Use the bindload binding function to dynamically adapt.

We can bind a function to the image. With this function, like the bindload description above, we can get the width and height of the original image.

Then calculate their width to height ratio. . Then set a width size (rpx), and finally set the width and height of the image dynamically through style. The code is as follows:

1. Write the page structure index.wxml:

<image src="../uploads/2.jpg" bindload="imageLoad"
style="width:{{imgwidth}}rpx; height:{{imgheight }}rpx;"></image>

2. Set the data 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
    })
  }
})

The above is I compiled it for everyone, I hope it will be helpful to everyone in the future.

Related articles:

What are the methods to add new properties of objects to the detection sequence in vue?

How to achieve the animation effect of bouncing off the edge in jQuery?

How to use sass in vue cli webpack (detailed tutorial)

How to change the P tag text value in jQuery

Implement the method of adding and assigning tag sub-elements in jQuery

By creating tags in js dynamics and setting attribute methods (detailed tutorial)

The above is the detailed content of How to implement adaptive display of image component pictures in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!