Proportional Scaling (image adaptive screen) and adaptive Scaling

Source: Internet
Author: User

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}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.