O'Reilly logo

HTML5 and CSS3 Responsive Web Design Cookbook by Benjamin LaGrone

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required