Responsify.js is an amazing jQuery plugin for responsive images

The modern web needs responsive design and there are several libraries to help in this. In this article, I will talk about ResponsifyJS that makes your images truly responsive. It solves most irritating image responsiveness problem and arranges images in a proper manner.

This jQuery plugin takes the container of images and dynamically rearranges them based on varying screen sizes. This plugin arranges images automatically, but it also allows you to define your own focus area in the photo.

If you want to define the top position for focus, use data-focus-top and pass the decimal value. You may find is confusing, developer of this plugin has made a free Responsify app. It helps you in calculating the positions dynamically in your browser.

See the image code below the photo. That automatically adds focus attributes for selected part of the photo. You just need to put that image src code.

It automatically calculates the size of image container and then resizes the image to keep focus area in viewable part.

How to use

Embed the responsify.js in the HTML by using the code below. Be sure to add the right path.

<script src="responsify.js"></script>

The call responsify function twice. Once when the window object is loaded and second time when the window is being resized. The second one is optional.

$(window).load(function() {
    $('img').responsify();
  });

 $(window).resize(function(){
    $('img').responsify();
  })

This plugin is not suitable for every project, but several e-commerce websites should consider this plugin. This will surely enhance the user experience of your website.

Download : responsify.min.js

Visit Official Website