JS Web page Picture Proportional Adaptive Scaling realization Method _javascript skill

Users upload photos, the size of the photo is unknown, you need to generate a preview, which is based on the area provided to the user preview, and center; if the picture is too large, you need to scale it proportionally. The following figure.

glanced at, center can use text-align:center; To achieve. and proportional scaling, the use of preset Width, height properties can not be solved. Because the user picture may be very long, it may be very wide. Think about their relationship on the line, judging by the conditions:

if (actual width > Preview maximum width) {
Shrink Relaxation = Preview Maximum width
}

if (actual height > Preview Maximum height) {
Zoom height = Preview Maximum Height
}
But this can be problematic, such as when the width and height are scaled, and if the scaling is different, the picture is not scaled proportionally, it becomes very ugly. In order for it to scale proportionally, you need to make a variety of judgments. That would violate the principle that we want the program to be automated. Think again, although do not like mathematics, but mathematics is very good, there should be other ways. And since it's scaled proportionally, why not use the actual image and the width of the preview area to calculate their relationship? Hmmmm ... Sure, OK. In fact, we always only need to shrink or one of the heights. Because the proportions are only large and small. Specifically, write a function to implement it:

Copy Code code as follows:

/**
* Picture proportionally adaptive scaling
* @param img {Element} user uploaded pictures
* @param maximum width of maxwidth {number} Preview area
* @param the maximum height of the preview area for maxheight {number}
*/

var resizeimg = function (img, maxwidth, maxheight) {
var w = img.width,
h = img.height;

When the picture is less than the preview area hours do not make any changes
if (W < maxwidth && h < maxheight) return;

When the actual picture ratio is greater than the width of the preview area
Scales the width of the picture, whereas the width of the picture
w/h > Maxwidth/maxheight? Img.width = MaxWidth:img.height = MaxHeight;