image redimensionner Jquery

Question

Voici le web: http://ldlocal.web44.net/test2/gallery.html

peut être téléchargé ici: http://ldlocal.web44.net/test2/test.zip

j'ai réussi à adapter automatiquement les images de la galerie par ligne selon si ce dernier est horizontale (une image par ligne) ou vertical (deux images par rangée). Le problème est maintenant que je veux que les images soient évolutives (redimensionnement sur le redimensionnement de la fenêtre) mais je n'ai aucune idée de comment l'obtenir. Comment ça devrait être fait?

ceci est mon 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 
    } 
}); 

} 

Answer 1

@ media = 'sceen' ou tout ce que vous utilisez, puis

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

Answer 2

vous pouvez le faire en Javasript en attachant à la fenêtre Redimensionner événement couvert ici http://api.jquery.com/resize/