Automatically Crop & Resize Images To Fit HTML Container – jquery.resizeandcrop.js: You must have been face this issue to adjusting image size for given div container. and making lot’s of images to fit different different sizes. No worry here I am going to share Automatically Crop & Resize Images To Fit HTML Container. This jQuery plugin to resize and crop images while preserving aspect ratio. Can also be used for lazy image loading and improving UI responsiveness when displaying lots of images.
How It Works
A placeholder image is used initially; the actual image loading, cropping and resizing happens in the background. Optimized for rendering hundreds of images on the same page without blocking the browser event loop; images are loaded in batches with a pause in between each batch. This maximizes UI responsiveness while ensuring image loading is not blocking AJAX calls.
Integrate Crop & Resize jQuery Plugin to optimizing your images
Libraries
Include jquery.resizeandcrop.css and jquery.resizeandcrop.js files with jQuery core library.
<link rel="stylesheet" type="text/css" href="jquery.resizeandcrop.css">link> <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">script> <script language="javascript" type="text/javascript" src="jquery.resizeandcrop.js">script> |
HTML
Here is the sample images which need to crop and resize but Note that you have to specify the image path in the realsrc attribute. The src attribute is used to specify the path to the placeholder image. If a realsrc attribute is present on the element, the src attribute will be treated as a placeholder image and swapped out for a resized and cropped version of the image specified in the realsrcattribute. If the realsrc image cannot be loaded, the placeholder image will be displayed.
|
![]("placeholder.png")
JS
Call the plugins with default settings.
$(function() { $("img.crop-me").resizeAndCrop(); }); |
Following are the list of options you can use in above function to customize crop and resize behavior.
$(function() { $("img.crop-me").resizeAndCrop({ 'width': 0, //Force the width of resized image to this value. 'height': 0, //Force the height of the resized image to this value. 'crop': true, // When `false`, only resize the image (if needed), do not crop it. That means the image might get distorted if the aspect ratio of the original image is different from the aspect ratio of the placeholder. It also allows for using this plugin as a simple image loader (deferred loading). 'center': true, //When `true`, the cropped portion of the image is centered. If you set it to `false`, the cropped portion is always the top-left part of the image. 'smart': true, // Smart crop+center mode?, 'preserveSize': false, //If the original image is smaller than the placeholder, preserve the space occupied by the placeholder and make the image float in its left-top corner. 'forceResize': false, //If the original image is smaller than the placeholder, enlarge it to fit the placeholder (it can make it blurry). 'imgClass': '', //Optional class to add to the `` element showing the resized and cropped image. 'contClass': '', //Optional class to add to the ` ` element that acts as a container for the `` element showing the resized and cropped image. 'renderStartDelay': 50, //Time in milliseconds to delay before loading/rendering images. Set to zero to immediately load/render images. 'renderBatchSize': 10, // Number of images to load at once. The event loop is freed up after each batch to maximize UI responsiveness. 'renderBatchPause': 200 // Time in milliseconds to pause before processing the next batch of images. It is important to have big enough pause when you load large sets of images, otherwise the UI may become very unresponsive. }); }); |
See live demo and download source code.
Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.
