Home > Article > Web Front-end > jQuery's method to dynamically modify image size when loading the page_jquery
The example in this article describes how jQuery dynamically changes the image size when the page is loaded. Share it with everyone for your reference. The details are as follows:
$(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 });
I hope this article will be helpful to everyone’s jQuery programming.