jquery dynamic Change Picture display size (modified version) of the implementation of ideas and code _jquery

When we want to show the background of a number of different sizes of pictures, in order to ensure the image size consistency and the proportion of coordination, the need to dynamically change the picture display size. By searching, we can find the jquery code to implement this function from the Internet as follows. This code can keep the size of the picture to a certain extent, if the original size of the picture is greater than the max* value, the displayed picture width is equal.

Original code:

Copy Code code as follows:

$ (document). Ready (function () {
$ ('. Post img '). each (function () {
var maxwidth = 100; Picture Maximum width
var maxheight = 100; Picture Max height
var ratio = 0; Scaling ratio
var width = $ (this). width (); Picture actual width
var height = $ (this). Height (); Picture actual height

Check if the picture is very wide
if (Width > maxwidth) {
Ratio = Maxwidth/width; Calculate zoom ratio
$ (this). CSS ("width", maxwidth); Set the actual display width
Height = height * ratio; Calculate the height after equal scale scaling
$ (this). CSS ("height", height); Set the height of equal scale after scaling
}

Check if the picture is super high
if (height > maxheight) {
Ratio = Maxheight/height; Calculate zoom ratio
$ (this). CSS ("height", maxheight); Set the actual display height
width = width * ratio; Calculate the height after equal scale scaling
$ (this). CSS ("width", width * ratio); Set the height of equal scale after scaling
}
});
});

In my JS code, also adopted this writing. However, in different browsers to test the effect, found that this type of writing can not adapt to the Chrome browser (Chrome version number is 10.0.648.204), will produce a picture of the original size of the bug displayed. The code for the $ ('. Post img '), each (), was then packaged with the $ (window). Load () method, which solves the problem that the Chrome browser is not displaying correctly. So why is there a bug in the Chrome browser, and $ (document). Ready and $ (window). What's the difference between load?

The original document ready event was started when the HTML document was loaded, and the DOM was ready, even though the picture resources had not yet been loaded in. The window Load event executes a little later, and it starts after the entire page includes frames, objects, and images are loaded. From this distinction can be analyzed in the Chrome browser for the picture does not use $ (window). When the load () method is processed, the order of the JS code to load and dynamically change the picture is uncertain.

About the above code, when placed in my page to get the height of the picture will be an error, the hint does not provide a width method

Copy Code code as follows:

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

So modify the code as follows:

Copy Code code as follows:

JQuery (window). Load (function () {
JQuery ("Div.product_info img"). each (function () {
DrawImage (this, 680, 1000);
});
});
function DrawImage (IMGD, Fitwidth, fitheight) {
var image = new Image ();
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;
}
}
}
}