JQ operation img Size (Dynamic modification)

Today's app page is about a problem

When we want to show the background of a number of different sizes of images, in order to ensure the image size consistency and coordination of proportions, you need to dynamically change the image display size.

By searching, we can find the jquery code that implements this functionality from the Web as follows.

This code can keep the size of the picture within a certain range, if the original size of the picture is greater than the max* value, the displayed picture width is equal

Code:

$ (document). Ready (function () {$ ('. Boxcour DL DD img'). each (function () {varMaxWidth = -;//max width of picture     varMaxHeight = -;//maximum height of picture     varRatio =0;//Zoom ratio     varwidth = $ ( This). width ();//Picture actual width     varHeight = $ ( This). Height ();//Picture Actual height//Check to see if the picture is very wide     if(Width >maxWidth) {ratio= Maxwidth/width;//Calculating the zoom ratio$( This). CSS ("width", maxWidth);//set the actual display widthHeight = height * ratio;//Calculate the height of a scaled scale$( This). CSS ("Height", height);//set the height of the proportional zoom     }        //Check if the picture is super high     if(Height >maxheight) {ratio= Maxheight/height;//Calculating the zoom ratio$( This). CSS ("Height", maxheight);//Setting the actual display heightwidth = width * ratio;//Calculate the height of a scaled scale$( This). CSS ("width", Width * ratio);//set the height of the proportional zoom     } }); });

In my JS code, I also took this kind of notation. However, when testing the results in different browsers, it is found that this type of writing does not fit into chrome (the Chrome version number is 10.0.648.204), which produces a bug that shows the image in its original size.

Later put $ ('. Post img '). The code for each () is packaged with the $ (window). Load () method, which solves the problem that the Chrome browser does not display correctly. Why is there a bug in the Chrome browser and $ (document). Ready and $ (window). What's the difference between the load?

The original document ready event is executed when the HTML document is loaded, which is the DOM, even though the picture resource has not yet been loaded. The window Load event executes slightly later, and it is executed only after the entire page includes frames, objects, and images are loaded.

From this difference can be analyzed in the Chrome browser in the picture does not adopt the $ (window) method when processing, picture loading and dynamically changing the image of the JS code execution sequence is uncertain.

--------------------------------------------------------------------------------------------------------------- -------------------

Above is the entire class of the article, about the above code, put in my page when the height of the image will be error, indicating that the width method is not provided

var width = $ (this). width ();    // Picture actual width var height = $ (this). Height ();  // Picture Actual height

To modify the code:

jquery (window). Load (function () {jquery ("div.product_info img"). each (function () {DrawImage ( This,680, +);        });        }); function DrawImage (IMGD, Fitwidth, fitheight) {varImage =NewImage (); IMAGE.SRC=imgd.src; if(Image.width >0&& image.height >0) {                if(Image.width/image.height >= fitwidth/fitheight) {                    if(Image.width >fitwidth) {Imgd.width=Fitwidth; Imgd.height= (Image.height * fitwidth)/Image.width; } Else{imgd.width=Image.width; Imgd.height=Image.height; }                } Else {                    if(Image.height >fitheight) {Imgd.height=Fitheight; Imgd.width= (Image.width * fitheight)/Image.height; } Else{imgd.width=Image.width; Imgd.height=Image.height; }                }            }        }

Original link: http://blog.csdn.net/roman_yu/article/details/6641911

JQ operation img Size (Dynamic modification)