A jquery plugin that makes images truly responsive, without sacrificing anyone's face. Give it more stars!
Switch branches/tags
Nothing to show
Clone or download
Latest commit a9d5c9e Dec 4, 2015
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app fix app styles Nov 29, 2015
comparison update gif Nov 28, 2015
css fix license, add popup Nov 30, 2015
images add images, fix scrollbar issue Nov 26, 2015
js fix license, add popup Nov 30, 2015
.gitignore Initial commit Nov 24, 2015
CNAME add cname Nov 24, 2015
README.md Update README.md Nov 29, 2015
favicon.png add favicon Nov 27, 2015
index.html fix license, add popup Nov 30, 2015
license.txt fix license, add popup Nov 30, 2015
responsify.js fixed typo in owidth variable declaration Dec 4, 2015
responsify.min.js fixed typo in owidth variable declaration Dec 4, 2015

README.md

Responsify.js

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.

Download

Demo

http://responsifyjs.space/#demo

App

http://responsifyjs.space/app

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() {
     $('img').responsify();
   });
  1. Call responsify function again when the window is being resized (optional)
  $(window).resize(function(){
    $('img').responsify();
  })

###Contact Me

###Other Project by Wentin