Resizing an element with unobtrusive jQuery

The purpose of this recipe is to build a smart image element handler in your project. This will be a simple element that can respond to your screen size. We can do all this with an unobtrusive jQuery script.

In a previous recipe, we resized an image with server-side scripting using PHP. This recipe is going to achieve a similar result, but it will be client side instead of server side, and it will be for a mobile-first responsive design.

This recipe is a good tool for mobile-first responsive design. For instance, if you want a scaled down image to display the loading of the document first, and if the screen is large, the script will replace the image with a larger version of the image. The unobtrusive ...

Get HTML5 and CSS3: Building Responsive Websites now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.