Proportional Scaling (image adaptive screen) and adaptive Scaling

Proportional Scaling (image adaptive screen) and adaptive Scaling

Proportional scaling of Applet Images

In the morning, I saw an article on proportional scaling of images on the forum. I only checked whether the image width is greater than the screen width. before I made Android, I also encountered proportional scaling issues such as images. the image aspect ratio and screen aspect ratio should be used for determination. make a note.

Old Rules, first.

1. The image aspect ratio is smaller than the screen aspect ratio

2. The image aspect ratio is greater than the screen aspect ratio.

3. In fact, the aspect ratio of an image is smaller than the aspect ratio of the screen, but the height and width are greater than the screen height and width. Therefore, you cannot simply use the height and width to determine the aspect ratio and then scale the image.

Code:

1. index. wxml

<! -- Index. wxml --> <! -- The image is wider than the screen width --> <image style = "width: {imagewidth} px; height: {imageheight} px; "src =" {imagefirstsrc} "bindload =" imageLoad "> </image> <! -- The picture is taller than the screen height --> <! -- <Image style = "width: {imagewidth} px; height: {imageheight} px; "src =" {imagesecondsrc} "bindload =" imageLoad "> </image> --> <! -- The image width is higher than the screen width and height --> <! -- <Image style = "width: {imagewidth} px; height: {imageheight} px; "src =" {imagethirdsrc} "bindload =" imageLoad "> </image> -->

2. index. js

// Index. js // obtain the application instance var imageUtil = require ('.. /.. /utils/util. js '); var app = getApp () Page ({data: {imagefirstsrc: 'http: // your imagesecondsrc: 'http: // bpic.588ku.com/back_pic/04/07/63/28581203949ca9d.jpg! /Fw/400/quality/90/unsharp/true/compress/true', // image link imagethirdsrc: 'http: // resize, imagewidth: 0, // scaled imageheight: 0, // 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. width; // Original Image width var originalHeight = e. detail. height; // Original Image height var originalScale = originalHeight/originalWidth; // Image height to width ratio console. log ('ininalwidth: '+ originalWidth) console. log ('ininalheight: '+ originalHeight) // obtain the screen width and height wx. getSystemInfo ({success: function (res) {var restart wwidth = res. required wwidth; var required wheight = res. interval wheight; var windowscale = interval wheight/interval wwidth; // The ratio of the screen height to the console. log ('your wwidth: '+ Your wwidth) console. log ('invalid wheight: '+ invalid wheight) if (originalScale <windowscale) {// The image width-to-width ratio is smaller than the screen height-to-width ratio // The image width after scaling is the screen width imageSize. imageWidth = required wwidth; imageSize. imageHeight = (required wwidth * originalHeight)/originalWidth;} else {// The Image Height-to-width ratio is greater than the screen height-to-width ratio // The height of the scaled image is the screen height imageSize. imageHeight = shadowwheight; imageSize. imageWidth = (windowHeight * originalWidth)/originalHeight ;}}) console. log ('scaled width: '+ imageSize. imageWidth) console. log ('zoom Height: '+ imageSize. imageHeight) return imageSize;} module. exports = {imageUtil: imageUtil}