Resize Images While Protecting Focus Areas – Responsify.js

Preview:

Description:

Responsify.js is the Vanilla JavaScript version of the jQuery Responsify.js plugin, which makes images responsive while protecting critical focal areas.

It applies smooth cropping and zooming to make images responsive, ensuring that vital parts of an image remain visible when the image resizes or its container changes sizes.

How to use it:

1. Download and include the responsify.js script in your project.

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

2. Apply the library to your desired image:

responsify('.myImage');

3. Define focus areas using the following HTML data attributes:

<img src="1.jpg" 
     alt="" 
     data-focus-left=".15" 
     data-focus-top=".12" 
     data-focus-right=".79" 
     data-focus-bottom=".66" 
     class="myImage" />

4. Once set up, the library will take over, ensuring your images are responsive while keeping the defined focus area intact.