SearchRecent postsThe Random ToolboxDrupal 7 Setting up variables for use in a template (preprocess and process functions) Rendering Drupal 7 fields (the right way) Linux Secure Copy (scp) command Restrict Free Shipping in Magento Quickbooks Text Connection Ticket Cross-Site Request Forgery (CSRF) jQuery Events: MouseOver / MouseOut vs. MouseEnter / MouseLeave Monthly archive
|
Resize Image and Maintain Aspect Ratio with jQuery// IMAGE MANIPULATION and MAINTAIN ASPECT RATIO function resizeImageWithAspectRatio(img) { var maxWidth = 250; // Max width for the image var maxHeight = 75; // Max height for the image var ratio = 0; // Used for aspect ratio var width = img.width(); // Current image width var height = img.height(); // Current image height // Check if the current width is larger than the max if(width > maxWidth){ ratio = maxWidth / width; // get ratio for scaling image img.css("width", maxWidth); // Set new width img.css("height", height * ratio); // Scale height based on ratio height = height * ratio; // Reset height to match scaled image width = width * ratio; // Reset width to match scaled image } // Check if current height is larger than max if(height > maxHeight){ ratio = maxHeight / height; // get ratio for scaling image img.css("height", maxHeight); // Set new height img.css("width", width * ratio); // Scale width based on ratio width = width * ratio; // Reset width to match scaled image } } |