Image-related operations (re-painting, obtaining sizes, resizing, and scaling) are implemented based on jquery ),
This article shares four common operations on jquery images for your reference. The specific content is as follows:
1. You can redraw the image size on the server or on the client using JQuery.
$(window).bind("load", function() { // IMAGE RESIZE $('#product_cat_list img').each(function() { var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $(this).width(); var height = $(this).height(); if(width > maxWidth){ ratio = maxWidth / width; $(this).css("width", maxWidth); $(this).css("height", height * ratio); height = height * ratio; } var width = $(this).width(); var height = $(this).height(); if(height > maxHeight){ ratio = maxHeight / height; $(this).css("height", maxHeight); $(this).css("width", width * ratio); width = width * ratio; } }); //$("#contentpage img").show(); // IMAGE RESIZE});
2. jQuery method for obtaining the actual size of Images
$ (Function () {var imgSrc = $ ("# image "). attr ("src"); getImageWidth (imgSrc, function (w, h) {console. log ({width: w, height: h}) ;}); function getImageWidth (url, callback) {var img = new Image (); img. src = url; // if the image is cached, the cached data if (img. complete) {callback (img. width, img. height);} else {// fully loaded event img. onload = function () {callback (img. width, img. height );}}}
3. jquery automatically adjusts the image size.
$ (Document ). ready (function () {$ ('img '). each (function () {var maxWidth = 500; // Maximum image width var maxHeight = 500; // maximum Image Height var ratio = 0; // zoom ratio var width = $ (this ). width (); // The actual width of the image var height = $ (this ). height (); // Actual Image height // check whether the image is too wide if (width> maxWidth) {ratio = maxWidth/width; // calculate the zoom ratio (this).css ("width ", maxWidth); // set the actual display width height = height * ratio; // calculate the scaled height (this).css ("height", height ); // set the height after proportional scaling} // check whether the image is super high if (height> maxHeight) {ratio = maxHeight/height; // calculate the zoom ratio (this%.css ("height ", maxHeight); // set the actual display height width = width * ratio; // calculate the scaled height (this).css ("width", width ); // set the height after proportional scaling }});});
4. Use jQuery to resize the image
$(window).bind("load", function() { // IMAGE RESIZE $('#product_cat_list img').each(function() { var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $(this).width(); var height = $(this).height(); if(width > maxWidth){ ratio = maxWidth / width; $(this).css("width", maxWidth); $(this).css("height", height * ratio); height = height * ratio; } var width = $(this).width(); var height = $(this).height(); if(height > maxHeight){ ratio = maxHeight / height; $(this).css("height", maxHeight); $(this).css("width", width * ratio); width = width * ratio; } }); //$("#contentpage img").show(); // IMAGE RESIZE});
The above is all the content in this article. It helps you achieve image re-painting, image size acquisition, image resizing, and image scaling.
Articles you may be interested in:
- Jquery image pre-loading auto proportional scaling plug-in
- Implement proportional image scaling plug-in using jquery
- Jquery-based code for Image Upload and image size verification and image Preview
- Switch the image size using replace string replacement in jQuery
- JQuery loads an image adaptive and fixed-size DIV
- JQuery achieves proportional scaling and allows large images to adapt to the page layout
- Jquery preview image to show the actual size with the mouse
- Use jQuery to verify the format and size of the uploaded Image
- How to dynamically modify the image size when jQuery loads a page