Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to achieve the proportional scaling effect of pictures in WeChat Mini Programs". The editor shows you the operation process through an actual case. The operation method is simple and fast, and it is practical. I hope this article "how to achieve the proportional scaling effect of pictures in WeChat Mini Programs" can help you solve the problem.

WeChat Mini Programs's picture is scaled in proportion.

1. The aspect ratio of the picture is less than that of the screen.

two。 The aspect ratio of the picture is greater than that of the screen.

3. In fact, the aspect ratio of the picture is smaller than that of the screen, but the aspect ratio of the picture is larger than that of the screen. Therefore, it can not be judged simply by height and width, but should be scaled after judging by aspect ratio.

The above code:

1.index.wxml

2.index.js

/ / index.js / / get the application instance var imageUtil = require ('.. /.. / utils/util.js') Var app = getApp () Page ({data: {imagefirstsrc: 'http://bpic.588ku.com/back_pic/00/03/85/1656205138bbe2d.png',// picture link imagesecondsrc:' http://bpic.588ku.com/back_pic/04/07/63/28581203949ca9d.jpg!/fw/400/quality/90/unsharp/true/compress/true', / / Image link imagethirdsrc:' http://img1.gtimg.com/ent/pics/hv1/13/71/2061/134034643.jpg', imagewidth: 0 imagewidth: imageSize.imageWidth / scaled width imageheight: 0 Legend / scaled height}, onLoad: function () {}, imageLoad: function (e) {var imageSize = imageUtil.imageUtil (e) this.setData ({imagewidth: imageSize.imageWidth, imageheight: imageSize.imageHeight})})

3.util.js

/ / util.js function imageUtil (e) {var imageSize = {}; var originalWidth = e.detail.widthboarder / picture original width var originalHeight = e.detail.heightlemake / picture original height var originalScale = originalHeight/originalWidth;// picture aspect ratio console.log ('originalWidth:' + originalWidth) console.log ('originalHeight:' + originalHeight) / / get screen width and height wx.getSystemInfo ({success: function (res) {var windowWidth = res.windowWidth Var windowHeight = res.windowHeight; var windowscale = windowHeight/windowWidth;// screen aspect ratio console.log ('windowWidth:' + windowWidth) console.log ('windowHeight:' + windowHeight) if (originalScale < windowscale) {/ / the picture aspect ratio is less than the screen aspect ratio / / the scaled width of the picture imageSize.imageWidth = windowWidth; imageSize.imageHeight = (windowWidth * originalHeight) / originalWidth } else {/ / the aspect ratio of the picture is greater than the aspect ratio of the screen / / the height of the scaled picture is the screen height imageSize.imageHeight = windowHeight; imageSize.imageWidth = (windowHeight * originalWidth) / originalHeight;}) console.log ('scaled width:' + imageSize.imageWidth) console.log ('scaled height:' + imageSize.imageHeight) return imageSize } module.exports = {imageUtil: imageUtil} about "how to achieve proportional scaling of pictures in WeChat Mini Programs" is introduced here. Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.