Dynamically-Sized, Responsive Images with jQuery

Check out the demo and a more in-depth explanation.

This technique builds off of Ethan Marcotte’s image treatment in his book Responsive Web Design, (which I highly recommend).

In the book Ethan demonstrates a technique for making images dynamically scale to the proportions of the browser window. This is done by initially setting all images to a max-width:100% and then enclosing each image in a div with a custom-set width as a percentage.

What I wanted to do was eliminate the need for a custom-coded containing div around all of my img elements. I want to be able to insert my images without writing custom CSS classes and making calculations about the unique width of each image. So with the help of the generous folks at Stack Overflow I was able to come up with a jQuery based solution.

I realize that the demo and my explanation is a little rough for the time being, but if I don’t share this now then I probably never will. Please leave me a comment with any questions and I will do my best to respond.

Evan ScheingrossHi, I'm Evan Scheingross

I design and develop custom WordPress websites and I love fish tacos. Feel free to check out my work, learn more about what I do, or get in touch if you have a question.


Leave a Reply

Your email address will not be published. Required fields are marked *