javascript - Fit to box with two images -

javascript - Fit to box with two images -

i´m working on resize effect jquery (no css)

the problem have resize it´s working ok on images, can´t create set 2 images on same row, design. if image horizontal 1 per line if it´s vertical should arrange 2 per line resizing working on both, thought how accomplish this?

this script:

$('.gallery_item').each(function(){ $('.gallery_img').each(function(){ var ww = $(window).width() - 60 - 230; var wh = $(window).height() - 60; var iar = $(this).attr('height') / $(this).attr('width'); var war = wh / ww; if(iar <= war){ $(this).attr("width" , ww); $(this).attr("height" , ww * iar); }else{ $(this).attr("height" , wh); $(this).attr("width" , wh / iar); } $('.gallery_item').css({ 'width' : $(this).attr('width'), 'height' : $(this).attr('height'), 'padding-bottom' : 0 }); }); }) $(window).bind('resize' , function(){ $('.gallery_item').each(function(){ $('.gallery_img').each(function(){ var ww = $(window).width() - 60 - 230; var wh = $(window).height() - 60; var iar = $(this).attr('height') / $(this).attr('width'); var war = wh / ww; if(iar <= war){ $(this).attr("width" , ww); $(this).attr("height" , ww * iar); }else{ $(this).attr("height" , wh); $(this).attr("width" , wh / iar); } $('.gallery_item').css({ 'width' : $(this).attr('width'), 'height' : $(this).attr('height'), 'padding-bottom' : 0 }); }); }) });

and markup:

<div class="gallery_item"> <img class="gallery_img" src="img/gallery0.jpg" alt="gallery0" width="850" height="567"> <img class="gallery_img vertical_img" src="img/gallery1.jpg" alt="gallery1" width="380" height="570"> <img class="gallery_img vertical_img" src="img/gallery2.jpg" alt="gallery2" width="382" height="570"> </div>

i have tried using float:left on .vertical_img no luck.

using display:inline; on .vertical_img should set both of images on same line. if combined width greater width of container appear on different lines, however.

your container (div.gallery_item) 250px wide, preventing working. big image exceeds boundaries of container. container need width of outerwidth of 2 images combined (or greater).

javascript jquery html