jQuery Image Resize

You may also like...

43 Responses

  1. Mikko says:

    You probably should set width in first if-statement like you do with height:

    width = maxWidth;

    Otherwise it calculates new width wrong in second if.

  2. Eric Juden says:

    Thanks Mikko, I overlooked that. :)

  3. Takitani says:

    Very good, thx for sharing

  4. Thanks – totally bailed me out!

  5. khan says:

    You are just modifying the image properties. Can someone tell me if I can actually do some image manipulation on the client side (JQuery) before it gets uploaded to the server?

    Say someone is uploading 2MB 2500×2500 image, I want to resize it to 500×500 and then send the modified (smaller) file to the server rather than full 2MB? Or it is too much to ask from javascript?

  6. Eric Juden says:

    khan,

    I think you'd be better off using a server-side language like php or asp.net to process the images when the files are being uploaded.

    Eric

  7. sylbal says:

    Hi,

    I start from this post to create a resize image function but I have problem with safari,
    var width = $(this).width(); // Current image width
    var height = $(this).height(); // Current image height

    returns 0

    I try to find a work around then keep you posted

  8. Cedric says:

    Hi,

    I'm sorry to be so bad but this is not working for me.

    I've downloaded jquery 1.3.2 on jquery.com

    I insert it like that

    script src="jquery-1.3.2.js" type="text/javascript"

    I paste your code exactly in my page.

    I have only that:

    img src="dff30__N1D0212.JPG" class="story-small"

    and nothing has changed.

    Can you please help me. I need so baddly this to work.

    Thanks

    Cedric

  9. Eric Juden says:

    Cedric,

    Can you send a link to the page you are doing this on? Do you have a javascript debugger that is showing any errors?

    Thanks,

    Eric

  10. Cedric says:

    Hi,

    thnaks for your quick answer
    http://em-bassadors.com/mini/

    Thank you.

    Cedric
    cedric.massonnat@gmail.com

  11. Eric Juden says:

    Cedric,

    Try putting your image inside a div with a class of "story-small". The css was looking for an element with a class of "story-small" with an image inside of it.

    Eric

  12. Cedric says:

    Thank you so much !!
    I don't know why I put a class inside the img.

    Thanks.

    BTW, you have a very nice blog, very interesting.

    Take care

  13. Thanks a lot! this script is lake Druce Lee, simple and effective.

  14. Michael says:

    Hey Eric,

    i have a question to your Script.

    Am i right, that this script only changes the size of the div and doesnt resize the picture itself?

    Greetings,
    Michael

  15. Eric Juden says:

    Michael,

    You are not correct. The script is resizing the image, and not a div. The 2nd line of the script says ('.story-small img'). That is grabbing any image tag inside of a div with a class of story-small.

    Thanks,

    Eric

  16. Michael says:

    Ah nice thanks for the Information, now i know how to use it.

    Greetings,
    Michael

  17. Jules Van de Velde says:

    To select any img with a class of story-small you could use ('img.story-small') if you didn't want to put each image inside of a div

  18. joren says:

    Hi,

    This is a very handy script, but I'm having some problems with it.
    I'm browsing with Safari, Chrome and Firefox on a mac and the first time I visit a page on my website the images arn't resized. If I reload the page, they resize.

    I think my browser doesn't know the size of the images when the document is loaded.

    this is an example of my website I'm developing: http://fileflambe.be/topics/117-raad-de-screensho

    Is there a solution for this problem?

  19. Eric Juden says:

    Joren,

    When I view the link you posted it shows the images full size until the page is done loading. Then the image is scaled down. I'm not sure how to fix this besides making your page load faster so it's not as noticeable.

    Thanks,

    Eric

  20. Jared says:

    Or try preloading the image….

  21. joren says:

    weird,

    I have the same problem on this page http://fileflambe.be/posts/1798-google-auto-aanvu
    the first time the image stay big.

    If it is only me who is seeing them big, there is noproblem :)

  22. Eric Juden says:

    Joren,

    I think you'd probably be better of doing this on the server side, instead of using Javascript. Your images are pretty large and it's taking the page longer to load.

    Eric

  23. Geeo says:

    you are wrong, jquery does not get the image width, instead of "each()" use "load()"; try an alert imediatly after you get the image height in both each and load events, you will see that "each" returns width 0 and "load" returns the correct width :)

  24. James says:

    Hi Eric
    Thanks for this!
    I think I have solved Joren's problem, which I was also experiencing, by doing this:

    $('.main_content_text img').load(function() {
    $('.main_content_text img').each(function() {

    at the start instead of:

    $(document).ready(function() {
    $('..main_content_text img').each(function() {

    What do you think?

    Thanks, James

  25. keyur says:

    simillar problem as weird, but in IE thier is no issue. it may cause problem in FF

  26. Worked right away, thanks!

  27. Dave Reeder says:

    It doesn't work in Google Chrome as it tries to execute your code at the same time as loading the images, so we need to tell it to wait for the images to load (so wrap this function round your $('.images img').each function):

    $('.images img').load(function() {
    // your code in here
    });

    • Eric Juden says:

      Dave,

      Thanks for the input. When I used this I didn't have super large images loading. I meant it more as an image resize for small to medium size images.

      Eric

  28. steven lots says:

    You can solve the problems with safari and chrome, by running the code on $(window).load(…) instead of $(document).ready(….).

  29. Vyom says:

    Hi Mikko

    The script is very good. But i have some problem.
    What you script did, only set the width & height right?

    But when i right click on image & save as, that case originla image is save.

    I want resize that to save new image.

    Please help me if you know?
    Thank you
    Vyom

  30. D123 says:

    Hello,

    The script is very helpfull.
    Runs perfect in FF,Safari,Chrome.
    Doesn't work in IE.
    Please help me.

    Thank you,
    D

  31. Bim says:

    Dear D123!
    Work in IE7,8,9. In IE6, try add () to "maxWidth / width" and "maxHeight / height":
    —————————————
    ratio = (maxWidth/width); // get ratio for scaling image
    —and———————————
    ratio = (maxHeight/height); // get ratio for scaling image
    —————————————

    Thanks!

  32. Koen Zomers says:

    Works like a charm, thanks for sharing!

  33. jon says:

    Great code Eric, thanks! I'm trying to get this to work on images that I am using inside inputs e.g

    any suggestions?

  34. jon says:

    sorry my code was not displayed above..

    (Lessthansign) input style='background: url(images/buttons/next.png) center no-repeat;width:150px;height:200px;'type='button'/ (Greaterthansign)

  35. Dommie says:

    Hi, I´m new in the world of JQuery, Can you put a html example? I don´t know very well how it works? I need create a div ?

    Thanks

    • Eric Juden says:

      Hi Dommie,

      Yes, the image needs to be in a div. In my example above, I had it in a div with a class of story-small.

      <pre lang="html"><div class="story-small"><img src="#" /></div></pre>

      Hope that helps,

      Eric

  36. Raymond Moncada says:

    Hi, Thanks for the code it was helpful! I change it to my needs. My goals was to make an image in a div work as a background and the image would re-size with the window resolution when the screen size changed.

    //get the windows width with no additional columns

    var bodywidth = $(document).width();

    //get the hieght of the window minus header and footer

    var bodyheight = $(document).height() – $(".header").height() – $(".footer").height();

    //this is my ratio ~ 1.67

    var imgRatio=1481/883;

    //get current window ratio including my footer;

    var mydisplayRatio=bodywidth/(bodyheight+$(".footer").height());

    //if mydisplay ratio is BIGGER then contrain in height otherwise constrain in width

    if (mydisplayRatio>imgRatio) {

    $("#img_alexko").height(bodyheight+$(".footer").height());

    $("#img_alexko").width(((bodyheight+$(".footer").height()) * imgRatio));

    }else{

    $("#img_alexko").width(bodywidth);

    $("#img_alexko").height(bodywidth/imgRatio);

    }

    • george says:

      can you please specify how you did that, because in mine website doesn't work.

      $(document).ready(function() {

      $('.studyaboard2').each(function() {

      //get the windows width with no additional columns

      var bodywidth = $(document).width();

      //get the hieght of the window minus header and footer

      var bodyheight = $(document).height() – $('.studyaboard2').height() – $('.studyaboard2').height();

      //this is my ratio ~ 1.67

      var imgRatio=1481/883;

      //get current window ratio including my footer;

      var mydisplayRatio=bodywidth/(bodyheight+$('.studyaboard2').height());

      //if mydisplay ratio is BIGGER then contrain in height otherwise constrain in width

      if (mydisplayRatio>imgRatio) {

      $('#img_alexko').height(bodyheight+$('.studyaboard2').height());

      $('#img_alexko').width(((bodyheight+$('.studyaboard2').height()) * imgRatio));

      }else{

      $('#img_alexko').width(bodywidth);

      $('#img_alexko').height(bodywidth/imgRatio);

      }

      });

      });

      the image goes on top, not on the background

Leave a Reply

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

* Copy This Password *

* Type Or Paste Password Here *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>