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.

Share

13 Comments

  • Posted October 10, 2012 at 9:02 pm | Permalink

    This is so simple and elegant and WORKS. Thank you so much!

  • heather
    Posted February 13, 2013 at 7:44 am | Permalink

    In the demo you should link back to this blog post. Thanks for this!

  • Posted June 2, 2013 at 1:15 am | Permalink

    I hardly leave responses, however i did a few searching and wound up
    here Dynamically-Sized, Responsive Images with jQuery
    - Evan Web Design. And I actually do have a few questions for
    you if you don’t mind. Is it simply me or does it look like some of these remarks appear like left by brain dead visitors? :-P And, if you are posting on other social sites, I would like to follow anything new you have to post. Could you list of the complete urls of all your shared pages like your twitter feed, Facebook page or linkedin profile?

  • Posted July 16, 2013 at 1:40 pm | Permalink

    Terrific article! This is the kind of information that are meant to be shared across the web.
    Shame on the seek engines for now not positioning this post higher!
    Come on over and seek advice from my web site .
    Thank you =)

  • Posted September 17, 2013 at 2:59 am | Permalink

    Hello! I’m David. Your blog post are really amazing as well as you blog is also great, I cant wait to see your new post. Thanks!!http://www.davidolsenmarketing.com/

  • Posted October 6, 2013 at 9:18 am | Permalink

    Butler was a principal investigator of one of the first interdisciplinary, comprehensive, longitudinal studies of healthy community-residing older persons, conducted at the National Institute of Mental Health (1955-1966), which resulted in the landmark book Human Aging. His research helped establish the fact that senility was not inevitable with aging, but is a consequence of disease.

  • Posted April 13, 2014 at 11:17 pm | Permalink

    Hi, i think that i saw you visited my website thus
    i came to “return the favor”.I’m attempting to find things to improve my website!I suppose its ok to use a few of your ideas!!

  • Posted April 19, 2014 at 10:06 pm | Permalink

    This piece of writing presents clear idea designed for the new users
    of blogging, that in fact how to do blogging.

  • Posted May 10, 2014 at 1:03 pm | Permalink

    Thank you a bunch for sharing this with all folks you really realize what you’re talking about!
    Bookmarked. Please additionally discuss with my site =).
    We will have a link change arrangement between
    us

  • Posted May 20, 2014 at 11:06 am | Permalink

    Thanks , I’ve just been looking for information about
    this subject for ages and yours is the best I’ve discovered so far.
    However, what concerning the conclusion? Are you sure in regards to the
    supply?

  • Posted May 26, 2014 at 6:51 am | Permalink

    Nice weblog here! Additionally your web site rather a
    lot up very fast! What host are you the use of?
    Can I get your affiliate link on your host? I want my website loaded up as quickly as yours
    lol

  • Posted May 26, 2014 at 11:24 pm | Permalink

    Вы не правы. Я уверен. Могу это доказать.
    Пишите мне в PM, обсудим.

  • Posted May 26, 2014 at 11:24 pm | Permalink

    Так-так… надо будет присмотреться к этой области
    :)

2 Trackbacks

  1. [...] Scheingross has a good demo of Evan Marcotte’s recommendation to dynamically resize an image based on a proportion of the browser width. (Marcotte is credited [...]

  2. [...] Scheingross has a good demo of Evan Marcotte’s recommendation to dynamically resize an image based on a proportion of the browser width. (Marcotte is credited [...]

Post a Comment

Your email is never shared. Required fields are marked *

*
*