Want to take your software engineering career to the next level? Join the mailing list for career tips & advice Click here


A jquery plugin that makes images truly responsive, without sacrificing anyone's face. Give it more stars!

Subscribe to updates I use ResponsifyJS

Statistics on ResponsifyJS

Number of watchers on Github 1340
Number of open issues 9
Main language HTML
Average time to merge a PR about 1 hour
Open pull requests 2+
Closed pull requests 0+
Last commit almost 5 years ago
Repo Created almost 5 years ago
Repo Last Updated 4 months ago
Size 64.2 MB
Homepage http://responsify...
Organization / Authorwentin
Page Updated
Do you use ResponsifyJS? Leave a review!
View open issues (9)
View ResponsifyJS activity
View on github
Book a Mock Interview With Me (Silicon Valley Engineering Leader, 100s of interviews conducted)
Software engineers: It's time to get promoted. Starting NOW! Subscribe to my mailing list and I will equip you with tools, tips and actionable advice to grow in your career.
Evaluating ResponsifyJS for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)


A jquery plugin that makes images truly responsive, without sacrificing anyone's face :D

When images are used in a responsive container on web design, because of the container can change to any width:height ratio, a group shot could end up being cut off on people's faces, a nice photograph following rule of third could end up with no object in view. Responsive images face the challenge of how to keep the focused objects/area in view, this jquery plugin is here to solve the problem.






Use this interactive web app to generate the focus area data

What it does

Responsify.js does the following:

  1. It allows you define a focus area on an image using data-focus-xxx tag
  2. It takes in the focus area data from the image, calcuate the image's container's size, resize and position the image accordingly, make sure the focus area is always in view and in the best position possible.
  • Responsive image with responsify.js

with-s play it yourself

  • Responsive image without responsify.js

without-s play it yourself

How to use

  1. Use this interactive web app to generate the focus area data http://responsifyjs.space/app/
    <img src="image.png" alt="" 
    data-focus-left=".30" data-focus-top=".12" data-focus-right=".79" data-focus-bottom=".66" />

data-focus-left is the focus area's left position comparing to the image's full width, in decimal. For example, if the full width is 300px, the focus area's left is 90, then the data-focus-left should be 90/300 = 0.3. Same logic applies to other three data attributes.

  1. Embed the responsify.js in the html
    <script src="responsify.js"></script>
  1. Call responsify function when window object is loaded
    $(window).load(function() {
  1. Call responsify function again when the window is being resized (optional)

Contact Me

Other Project by Wentin

ResponsifyJS open issues Ask a question     (View All Issues)
  • about 4 years Support for css background-image
  • almost 5 years Preload image into the helper App
ResponsifyJS open pull requests (View All Pulls)
  • jquery > jQuery and blockquote
  • Added support for background images
ResponsifyJS questions on Stackoverflow (View All Questions)
  • use Fancybox with ResponsifyJS
ResponsifyJS list of languages used
Other projects in HTML
Powered by Autocode - Instant Webhooks, Scripts and APIs
Autocode logo wordmark