How to Use jquery to control the width of an image? jquery-js tutorial

There are many ways to control the image width and height. The following describes how to implement jquery. If you are interested, you can learn the core code:

$ (Function () {$ (". dvcontent img "). each (function () {var maxwidth = 520; if ($ (this ). width ()> maxwidth) {var oldwidth = $ (this ). width (); var oldheight = $ (this ). height (); var newheight = maxwidth/oldwidth * oldheight; border (this).css ({width: maxwidth + "px", height: newheight + "px", cursor: "pointer "}); $ (this ). attr ("title", "click to view the source image"); $ (this ). click (function () {window. open ($ (this ). attr ("src "))});}});});

If the above Code cannot be executed, you can use the following code:

$ (Window ). load (function () {$ (". dvcontent img "). each (function () {var maxwidth = 600; if ($ (this ). width ()> maxwidth) {var oldwidth = $ (this ). width (); var oldheight = $ (this ). height (); var newheight = maxwidth/oldwidth * oldheight; border (this).css ({width: maxwidth + "px", height: newheight + "px", cursor: "pointer "}); $ (this ). attr ("title", "click to view the source image"); $ (this ). click (function () {window. open ($ (this ). attr ("src "))});}});});

There is also a way to use css that is compatible with IE6 to automatically scale down an image when the specified width is exceeded. However, this method does not comply with W3C standards. The Code is as follows:

.cate img{    max-width: 600px;     height:auto;     width:expression(this.width > 600 ? "600px" : this.width); }

Therefore, to be compatible with IE and other browsers as much as possible, and to comply with W3C standards, we can use js to control the image width. The following uses jquery to control the maximum width of the image display. The main code is as follows:

$(window).load(function() {    $(".cate img").each(function() {        var maxwidth = 600;        if ($(this).width() > maxwidth) {            $(this).width(maxwidth);        }    });});

The code is very simple, that is, the maximum img width under the cate style can only be 600px .. Each (function () {...), each here calls the following methods one by one for the specified image set object. This jquery method can control the maximum width of the Image Display in IE6 and later browsers, chrome and Firefox.