jQuery image/window resize--max resize constraint <p>I currently have a page where I have fixed-size divs that load pages as a user scrolls down (similar to Infinite Scroll) and am currently working on functionality to have the loaded images and containers dynamically resize along with the browser window. My current issue is that I'm currently using <code>$(window).width</code> and <code>$(window).height</code>, which naturally causes the images to resize to the window width.</p> <p>I was wondering what I can set <code>maxWidth</code> and <code>maxHeight</code> to so that the images don't get resized any greater than their original size? I've been using <code>$(window)</code> just to test the function, but I basically don't want the images to become any larger than their original size. I've tried <code>$(this)</code>, but it causes the ratio to be equal to 1, resulting in no resize.</p> <pre><code> $(window).resize(function () { imageResize(); }); function imageResize() { $(".added").each(function () { var maxWidth = $(window).width(); var maxHeight = $(window).height(); var ratio = 0; var width = $(this).width(); var height = $(this).height(); if (width &gt; maxWidth) { ratio = (maxWidth / width); $(this).width(maxWidth); $(this).height(height * ratio); $(this).parent().height(height * ratio); $(this).parent().width(maxWidth); } else { ratio = (maxWidth / width); $(this).width(maxWidth); $(this).height(height * ratio); $(this).parent().height(height * ratio); $(this).parent().width(maxWidth); } }); } </code></pre>