Using jquery, dynamically and proportionally resize an img

Question

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 width:100% and top:#px bottom:#px. The images must also ultimately only resize their set height (603x427)

Here's the page:

My current woe

I'm pretty darn close, but what happens with the code below:

<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>

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.

Legend: .slides_container is part of the plugin and contains the image, .slides_container img is the image, .vid contains the .container for centering. For the above code, $('.slides_container').height(hgt-30); is to allow for pagination.

score 1 · Answer 1 · answered Apr 08 '12 at 22:38

1

Use the css() function instead:

$(window).resize(function() {
    var hgt = $(window).height() - 427;
    var wid = $(window).width() - 633;
    $('.slides_container img').css({
        width:wid,
        height:hgt
    });
    $('.slides_container').height(hgt);
    $('.vid').width($(this).width());
});

answered Apr 08 '12 at 22:38

faino

3,194
15
17

Still getting height and width out of proportion to one another. Height gets smaller, width doesn't, width gets narrower, height doesn't. Again, I'm looking for dynamic _and_ proportional on window resize. So, is there a way to tie the two together? – Adam Apr 08 '12 at 23:09
Okay, so to get the image to resize dynamically, I used `width:'auto',` (see edit). – Adam Apr 09 '12 at 10:36
At least I tried to add an edit. Anyway, changing the width to 'auto' worked. Though I'm still trying to get the jQ to fire onLoad. How do I? The image only resizes after resizing the window... – Adam Apr 09 '12 at 15:29

score 0 · Answer 2 · edited May 23 '17 at 11:56

0

If it's possible to compromise, without an img element you can make it a background, then I think this is what you're looking for http://css-tricks.com/how-to-resizeable-background-image/

Otherwise, as long as you have the original ratio (ration = orgWidth/orgHeight) you could take it and reflect it on the width/height. On resize, height = org_height * ratio . Accomplished before, it's pretty straight forward: How to resize images proportionally / keeping the aspect ratio?

edited May 23 '17 at 11:56

Community

1
1

answered Apr 08 '12 at 23:32

ido

811
2
8
20

Unfortunately, the .css solution won't do, either: It only resizes on width. It also has to resize on height as the window gets shorter _and_ width as the window gets narrower. – Adam Apr 09 '12 at 10:29

Using jquery, dynamically and proportionally resize an img

2 Answers2