CODEWITHSUNDEEP
jqueryimagepluginsdynamic-resizing
Adam
Adam

Reputation: 1022

Using jquery, dynamically and proportionally resize an img

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.

Upvotes: 0

Views: 3304

Answers (2)

ido
ido

Reputation: 811

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?

Upvotes: 0

faino
faino

Reputation: 3224

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());
});

Upvotes: 1

Related Questions