js code about adaptive scaling of images_image special effects

As shown below.

Having a quick look, centering can be achieved using text-align:center;. However, proportional scaling cannot be solved by using the width and height attributes of the default . Because the user picture may be very long or very wide. I thought about their relationship online and judged it according to the conditions:

Copy code The code is as follows:

if(actual width> preview maximum width) {
zoom width = preview maximum width
}

if(actual height>preview maximum height) {
zoom Height = preview maximum height
}

But there will be problems with this. For example, when both width and height are scaled, if the scaling is different, the image will not be scaled proportionally and will become very ugly. . In order to make it scale proportionally, various judgments need to be made. Then this goes against the principle of automating the program we want. Thinking about it again, although I don’t like mathematics, mathematics is still very useful, and there should be other ways. And since it is scaled proportionally, why not use the ratio between the actual image and the width of the preview area to calculate their relationship? hmmmm... It's really OK. In fact we only ever need to scale either width or height. Because the ratio is only for large and small species. Specifically, write a function to implement it:

Copy the code The code is as follows:

/ **
* Image adaptive scaling
* @param img {Element} User uploaded image
* @param maxWidth {Number} Maximum width of the preview area
* @param maxHeight {Number} Preview The maximum height of the area
*/

var resizeImg = function(img, maxWidth, maxHeight){
var w = img.width,
h = img.height;

// No changes are made when the image is smaller than the preview area
if(w
// When the actual image ratio is greater than the preview area width and height ratio
// Scale the image width, and vice versa
w/h > maxWidth/maxHeight ? img.width = maxWidth : img.height = maxHeight;
};

Complete Test code:

Copy code The code is as follows:

.cnt{text-align:center;width:600px;height:350px;margin:0 auto;border:1px solid #ddd;}

> ;

View original image || Return to article: About adaptive scaling of images according to proportions»

<script> <BR>window.onload = function () { <BR>var img = document.getElementById('img'), <BR>/**<BR>* Image adaptive scaling <BR>* @param img {Element} User uploaded image <BR>* @param maxWidth {Number} Maximum width of the preview area <BR>* @param maxHeight {Number} Preview The maximum height of the area<BR>*/ <BR>resizeImg = function(img, maxWidth, maxHeight){ <BR>var w = img .width, <BR>h = img.height; <BR>// No changes will be made when the image is smaller than the preview area <BR>if(w < maxWidth && h < maxHeight) return; <BR>// When When the actual picture ratio is greater than the width and height ratio of the preview area <BR>// Scale the image width, otherwise scale the image width <BR>w/h > maxWidth/maxHeight ? img.width = maxWidth : img.height = maxHeight; <BR> }; <BR>resizeImg(img, 500, 300); <BR>} <BR></script>