jQuery изменение размера изображений

Question

Мне удалось автоматически разместить изображения галереи на строку в зависимости от горизонтальности (по одному изображению на строку) или по вертикали (по два изображения на строку).

Проблема в том, что я хочу, чтобы изображения были масштабируемыми (изменение размера при изменении размера окна), но я понятия не имею, как его достичь. Как мне это сделать? (Я ищу в JavaScript/JQuery решения, чтобы избежать высота: авто проблемы ...)

Это полотно: http://ldlocal.web44.net/test2/gallery.html

можно скачать здесь: http://ldlocal.web44.net/test2/test.zip

это мой код:

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

Update ALL NEW CODE:

http://jsfiddle.net/vYGGN/

HTML:

<div id="content"> 
    <img class="fluidimage" src="http://thedoghousediaries.com/comics/uncategorized/2011-04-06-1b32832.png" 
    /> 
</div> 

CSS:

 body { 
      text-align:center; 
     } 
     img { 
      float: right; 
      margin: 0px 10px 10px 10px; 
     } 
     #content { 
      width:70%; 
      margin: 0px auto; 
      text-align: left; 
     } 

JS:

 $(document).ready(function() { 
      function imageresize() { 
       var contentwidth = $('#content').width(); 
       if ((contentwidth) < '300') { 
        $('.fluidimage').attr('height', '300px'); 
       } else { 
        $('.fluidimage').attr('height', '600px'); 
       } 
      } 

      imageresize(); //Triggers when document first loads  

      $(window).bind("resize", function() { //Adjusts image when browser resized 
       imageresize(); 
      }); 

     }); 

Найдено это в этой статье:

http://buildinternet.com/2009/07/quick-tip-resizing-images-based-on-browser-window-size/

Answer 2

Если вы хотите изменить размер изображений автоматически и уменьшить их пропорционально, все, что вам нужно сделать, это установить css max-width в теге <img>. Вы можете автоматически масштабировать его с процентным значением в соответствии с $(window) или любым элементом документа. Вот пример того, как масштабировать его пропорционально с помощью $(window) в процентах от окна:

$(document).ready(function() { 
    $(window).resize(function() { 
     var xWidth = $(window).width(); 
     $('.[img class]').each(function() { 
      $(this).css({maxWidth: xWidth * ([your percentage value of window]/100)}); 
     }); 
    }).trigger('resize'); 
}); 

Изменение [img class] к классу изображений. Измените [your percentage value of window] на процент элемента окна, по которому вы хотите увеличить ширину ваших изображений. Итак, если вы хотите 90%, измените это на 90. Когда пользователь изменит размер окна браузера, он также автоматически изменит размер изображений.