Responsify - Make Images Play Nicely In Responsive View

Written by Kevin Liew on 05 May 2016
23,213 Views • Javascript

Big background images have been quite a trendy thing in web design. You can easily spot one in Awwwards website. It's a design trend that suits all kind of websites such as landing page, portfolios, company websites.

However, it's quite a tricky thing to handle when large image and responsive come altogether. Some part of the image might get hidden as the screen size shrink into smaller viewport. Here we have a pretty nifty jQuery plugin called Responsify.js solves this issue.

Responsify.js is smart enough to keep the focus on the right area of the image. So, whenever the browser is resize, it will continue to focus on the area you've defined. If you don't know how to set it, it has an app to let you do it easily. It does the following:

  • It allows you define a focus area on an image using data-focus-xxx tag
  • 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.


Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.