StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POUsing jquery, dynamically and proportionally resize an img
text
Body
copied!<p>The problem: To make an image inside a plugin resize dynamically (H&W, proportionally) inside a div that gets shorter on window resize (there are essentially three areas: Top - static, bottom - static, middle - dynamic) with <code>width:100%</code> and <code>top:#px</code> <code>bottom:#px</code>. The images must also ultimately only resize their set height (603x427)</p> <p>Here's the page:</p> <p><a href="http://66.147.244.242/~happymas/enginethree/print.php" rel="nofollow">My current woe</a></p> <p>I'm pretty darn close, but what happens with the code below:</p> <pre><code><script type="text/javascript"> $(window).resize(function() { var hgt = $(window).height() - 427; var wid = $(window).width() - 633; $('.slides_container img').height(hgt); $('.slides_container img').width(wid); $('.slides_container').height(hgt-30); $('.slides_container').height(hgt); $('.vid').width($(window).width()); }); </script> </code></pre> <p>is the height of the image changes, as does the width, but they don't change proportionally. Instead, the width changes correctly, and the height changes correctly, but independent of one another. I want the images to remain proportional.</p> <p>Legend: <code>.slides_container</code> is part of the plugin and contains the image, <code>.slides_container img</code> is the image, <code>.vid</code> contains the <code>.container</code> for centering. For the above code, <code>$('.slides_container').height(hgt-30);</code> is to allow for pagination.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload