WeChat applet implements image adaptive width

This article mainly shares with you the WeChat applet to implement image adaptive width. I hope it can help you. First, let's take a look at the image component.

1. Understand the image component

##Since image has a default fixed width and Height, this will make 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 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
		})
  	}
})

##Related recommendations:

Summary of 10 image library examples

The above is the detailed content of WeChat applet implements image adaptive width. For more information, please follow other related articles on the PHP Chinese website!