jQuery Image Resizing Plugin: ImgLiquid

ImgLiquid is a jQuery plugin for resizing the images so that these images can fit in the container.

Features

• Optional Responsive (default settings are ‘off’).
• Lightweight: less than 2KBs gzipped
• Fill/Crop
• Align
• CallBacks
• Svg support
• Optional FadeIn Anim (default settings are ‘off’)
• Compatible with all browsers (Incl. ie6)

Why to use?

It’s a very good plugin for us to be able to maintain high quality of the image specially at the time of resizing it. You must have witnessed that oftentimes when we upload an image of any shape, be it vertical or horizontal, its quality gets degraded significantly. Hence, in order to maintain the image quality at the time of resizing it, this plugin is quite useful.

How it works?

It basically works to just fit the image or resize it in a container. It can be customized as well. The easiest way to go about using it is including the JavaScript file and then calling it. For example,

 //  including the javascript file

$(document).ready(function() { $(".imgLiquidFill").imgLiquid(); // calling image liquid 
});

It would hide the assigned image i.e. () and would fit the image in background of the div, resizing it. If you choose “fill: true” while calling imageliquid function i.e. ($(“.imgLiquidFill”).imgLiquid(fill: true)), it will fit the image in the background of the div. Similarly, if you choose “fill: false“, then you can see the image in the original manner the way you had uploaded it. In both ways, the image quality would be maintained.