Automatically Crop & Resize Images To Fit HTML Container – jquery.resizeandcrop.js

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.

Crop & Resize Images To Fit HTML Container

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.

<!--CSS-->
<link rel="stylesheet" type="text/css" href="jquery.resizeandcrop.css"></link>
 
<!--JS-->
<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.

<img class="crop-me" src="placeholder.png" realsrc="imagetoloadandcrop.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, 
  'height': 0, 
  'crop': true,  
 
  'center': true, 
 
  'smart': true, 
 
  'preserveSize': false, 
 
  'forceResize': false, 
 
  'imgClass': '', 
  'contClass': '', 
` element that acts as a container for the `` element showing the resized and cropped image.
 
  'renderStartDelay': 50, 
 
  'renderBatchSize': 10, 
 
  'renderBatchPause': 200  
 });
});

See live demo and download source code.

DEMO | DOWNLOAD

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.