Users upload photos, and the size of the photo is unknown; a preview needs to be generated. This preview map should be applied to the area provided by the preview of the user, and it is centered; if the picture is too large, it needs to be zoomed in proportion. As shown below.
Taking a look, you can use Text-Align: Center; to achieve it. In proportion, the width and height attributes that use preset <img /> cannot be solved. Because user pictures may be very long or very wide. I thought about their relationship online, and judged that this is as follows:
if (actual width> preview the maximum width) {
Scaling width = preview maximum width
}
if (actual height> preview maximum height) {
Scaling height = preview maximum height
}
However, there will be problems. For example, when the width and height are scaled. If the scaling is relatively different, the picture will not be scaled proportionally, and it will become very ugly. In order to allow it to be scaled proportional, various judgments need to be made. Then it violates the principle of our hope of automation. Think again, although you don't like mathematics, but mathematics is still very useful, there should be other ways. Since it is scaled in proportion, why not use the proportion of actual images and preview area widths to calculate their relationship? hmmmm ... really ok. In fact, we only need to zoom in width or height. Because the proportion is only large and small. Specifically, write a function to implement it:
Copy code code as follows:
/**
* The picture is zoomed in adaptive proportion
* @param IMG {Element} Pictures uploaded by the user
* @param maxwidth {number} The maximum width of the preview area
* @param maxheight {number} The maximum height of the preview area
*/
Var Resizeimg = Function (IMG, Maxwidth, Maxheight) {
var w = img.width,
h = img.head;
// When the picture does not make any changes than the preview area hours
if (w <maxwidth && h <maxheight) Return;
// When the actual picture ratio is greater than the proportion of width and height of the preview area
// Scaling picture width, otherwise scaling picture width
w/h> maxwidth/maxheight? Img.width = maxwidth: img.head = maxheight;