Shulou(Shulou.com)06/03 Report--

Editor to share with you how jQuery dynamically change the size of the picture display, I believe that most people do not understand, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

When we want to display several pictures of different sizes in the background, in order to ensure the consistency of the picture size and the coordination of the proportion, we need to change the picture display size dynamically. Through the search, we can find the jQuery code to achieve this function on the Internet as follows. This code can keep the size of the picture within a certain range, and if the original size of the picture is greater than the max* value, the width of the picture displayed is equal.

Original code:

The code is as follows:

$(document) .ready (function () {

$('.post img') .each (function () {

Var maxWidth = 100; / / maximum width of the picture

Var maxHeight = 100; / / maximum height of the picture

Var ratio = 0; / / Zoom

Var width = $(this) .width (); / / actual width of the picture

Var height = $(this) .height (); / / the actual height of the picture

/ / check whether the picture is too wide

If (width > maxWidth) {

Ratio = maxWidth / width; / / calculate the zoom factor

$(this) .css ("width", maxWidth); / / set the actual display width

Height = height * ratio; / / calculate the scaled height

$(this) .css ("height", height); / / sets the scaled height

}

/ / check whether the picture is super high.

If (height > maxHeight) {

Ratio = maxHeight / height; / / calculate the zoom factor

$(this) .css ("height", maxHeight); / / set the actual display height

Width = width * ratio; / / calculate the scaled height

$(this) .css ("width", width * ratio); / / set the scaled height

}

});

});

I also used this method in my js code. However, when testing the effect in different browsers, it is found that this writing method is not suitable for chrome browsers (chrome version number is 10.0.648.204). It will produce bug with pictures displayed in the original size. Later, the code of $('. Post img'). Each () was wrapped with the $(window). Load () method, which solved the problem of incorrect display in chrome browsers. So why is bug generated in chrome browsers, and what's the difference between $(document) .ready and $(window) .load?

Unity3d downloads http://www.unitymanual.com/

It turns out that the document ready event starts when the HTML document is loaded and the DOM is ready, even if the image resources have not yet been loaded. The window load event is executed later, and it starts after the entire page, including frames, objects, and p_w_picpaths, is loaded. From this difference, it can be analyzed that when the chrome browser does not use the $(window). Load () method to deal with pictures, the order of js code execution of picture loading and dynamically changing pictures is uncertain.

With regard to the above code, there will be an error when I get the picture height when I put it on my page, indicating that the width method is not provided.

The code is as follows:

Var width = $(this) .width (); / / actual width of the picture

Var height = $(this) .height (); / / the actual height of the picture

Therefore, the modified code is as follows:

The code is as follows:

JQuery (window) .load (function () {

JQuery ("div.product_info img") .each (function () {

DrawImage (this, 680,1000)

});

});

Function DrawImage (ImgD, FitWidth, FitHeight) {

Var p_w_picpath = new Image ()

P_w_picpath.src = ImgD.src

If (p_w_picpath.width > 0 & & p_w_picpath.height > 0) {

If (p_w_picpath.width / p_w_picpath.height > = FitWidth / FitHeight) {

If (p_w_picpath.width > FitWidth) {

ImgD.width = FitWidth

ImgD.height = (p_w_picpath.height * FitWidth) / p_w_picpath.width

} else {

ImgD.width = p_w_picpath.width

ImgD.height = p_w_picpath.height

}

} else {

If (p_w_picpath.height > FitHeight) {

ImgD.height = FitHeight

ImgD.width = (p_w_picpath.width * FitHeight) / p_w_picpath.height

} else {

ImgD.width = p_w_picpath.width

ImgD.height = p_w_picpath.height

}

}

}

}

The above is all the contents of the article "how jQuery dynamically changes the size of the picture display". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.