调整图片大小的Jquery [重复]

This question already has answers here:
                </div>
            </div>
                    <div class="grid--cell mb0 mt4">
                        <a href="/questions/15007242/image-resize-of-items-jquery" dir="ltr">Image resize of items jQuery</a>
                            <span class="question-originals-answer-count">
                                (2 answers)
                            </span>
                    </div>
            <div class="grid--cell mb0 mt8">Closed <span title="2013-02-25 13:50:35Z" class="relativetime">7 years ago</span>.</div>
        </div>
    </aside>

This is the web: http://ldlocal.web44.net/test2/gallery.html

Can be downloaded here: http://ldlocal.web44.net/test2/test.zip

I have managed to fit automatically the images of the gallery per row depending if it´s horizontal (one image per row) or vertical (two images per row).

The problem now is that I want the images to be scalable (resize on window resize) but I have no idea how to achieve it. How it should me made?

this is my code:

var gallery = new Gallery($('#gallery_images_inner'));

function Gallery(selector){

this.add_module = function(type, image){
    var container = $('<div />' , {
        'class' : 'gallery_container'
    }).append(image);
    if(type == 'horizontal'){
        var h_ar = image.attr('height') / image.attr('width');
        container.css({
            'width' : selector.width(),
            'height' : selector.width()*h_ar
        })
    }
    if(type == 'vertical'){
        container.css({
            'width' : v_width,
            'height' : v_height
        })
    }
    container.appendTo(selector);
    container.children('img').fitToBox();
}
var _this = this;
var gutter = 0;
// start vars for counting on vertical images
var v_counter = 0;
var w_pxls = 0;
var h_pxls = 0;
// iterates through images looking for verticals
selector.children('img').each(function(){
    if($(this).attr('width') < $(this).attr('height')){
        v_counter++;
        h_pxls += $(this).attr('height');
        w_pxls += $(this).attr('width');
    }
})
// calculates average ar for vertical images (anything outside from aspect ratio will be croped)
var h_avrg = Math.floor(h_pxls/v_counter);
var w_avrg = Math.floor(w_pxls/v_counter);
var v_ar = h_avrg/w_avrg;
var v_width = (selector.width())/2;
var v_height = v_width*v_ar;
selector.children('img').each(function(){
    if(parseInt($(this).attr('width')) > parseInt($(this).attr('height'))){
        _this.add_module('horizontal', $(this));
    }else{
        _this.add_module('vertical', $(this));
    }
})
selector.isotope({
    masonry: {
        columnWidth: selector.width() / 2
    }
});

}
</div>

@media='sceen' or whatever you are using and then

img {max-width: 100%, height: auto;}

you can do it in javasript by attaching to the window resize event covered here http://api.jquery.com/resize/