WeChat applet implementation method of IMAGE Component Image Adaptive Width Proportion

The instance of this paper describes the method of adapting the IMAGE Components Adaptive Width Scale. Share to everyone for your reference, specifically:

微信小程序实现image组件图片自适应宽度比例显示的方法 Since the image has a default fixed width And the height, so that we are doing it when you do picture adaptive, it is not good. Let’s solve

(1) Using Mode: Widthfix

Widthfix: Width The constant, the height is automatically changed, and the original graph is unchanged.

First we set up the image of Image for Widthfix, then add a fixed RPX width, such as: 730RPX.

This picture can also be adaptive. . Because the RPX itself of the applet is an adaptive display unit

(2). Dynamic adaptation using the BindLoad binding function.

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

Then calculate their wide high ratio. . Then set a width size (rpx), and finally set the aspect of the image through the Style dynamic. The code is as follows:

1. Writing page structure Index.wxml:
     
2. Setting data index.js

// Get application example var app = getapp () Page ({data: {ScreenWidth: 0, ScreenHeight: 0 , IMGWIDTH: 0, IMGHEIGHT: 0,}, online: 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, // Get picture real width $ height = E.Detail.height, ratio = $ width / $ height; // Picture of true wide proportion var viewwidth = 500, // Set picture display width, viewheight = 500 / ratio; // calculated height value this.setdata ({imgwidth: viewwidth, IMGHETIT: viewHeight}) }})
   It is desirable to help the WeChat applet development. 
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment