Smart Responsive Image Cropping/Resizing On Resize - jQuery FocusPoint

File Size: 1.26 MB
Views Total: 3761
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Smart Responsive Image Cropping/Resizing On Resize - jQuery FocusPoint

FocusPoint is a jQuery responsive image solution that intelligently crops/resizes/re-positions your image to fit its parent container on window resize. Unlike the CSS background-size:cover property, the plugin has the ability to make the specified 'Focus Points' always be visible when cropping and resizing.

See also:

Basic usage:

1. Put the main stylesheet focuspoint.css in the head section, and the JavaScript focuspoint.js at the bottom of the webpage.

<link rel="stylesheet" href="focuspoint.css">
<script src="//"></script>
<script src="jquery.focuspoint.js"></script>

2. Set the focus point of your image using data attributes as follow:

<div class="focuspoint"
     <img src="image.jpg">

3. The JavaScript to keep the point of your image within the container when resized.


4. Set the throttle duration in milliseconds.

  throttleDuration: 17

5. API methods.

// Re-do calculations and re-position an image in it's frame. 
// Call if container dimensions change.

// Start window event listener and re-focus image when window is resized

//  Stop re-focusing image when window is resized

Change log:


This awesome jQuery plugin is developed by jonom. For more Advanced Usages, please check the demo page or visit the official website.