Изменение размера элементов jQuery

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

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

это мой код:

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

}

источник

2013-02-21 Anonymous

Альтернативой может быть масонство, который отлично подходит для элементов повторное позиционирование, чтобы соответствовать их пространство ... http://masonry.desandro.com/ – Archer

Элементы позиционирования хорошо, that's не проблемы, проблема в том, что я хочу изменение ширины и высоты изображений при изменении размера окна, спасибо в любом случае! – 2013-02-21 16:34:31

Не стоит беспокоиться - это такая замечательная библиотека, о которой всегда стоит упомянуть :) (Нет, это не мое: p) – Archer

использовать проценты для контейнера, содержащего изображение (для обоих это ширина и высота) .. то также использовать процентное значение для ширины изображения и высоты, как (он не должен быть 100%, он просто должен быть в процентах относительно его контейнера)

источник

2013-02-21 16:50:13 abbood

Это было бы лучше решить с помощью CSS. Просто установите ширину img на 100%, и она расширит контракт с размером его родителя. В приведенном ниже примере контейнер потребляет 25% окна, а img занимает 100% от этого. Вы можете использовать firebug, чтобы изменить ширину контейнера и увидеть разницу.

<DOCTYPE html> 
<html> 
<head> 
    <style> 
     .container { 
      width: 25%; 
     } 
     .container img { 
      width: 100%; 
     } 
    </style> 
</head> 
<body> 

    <div class="container"> 
     <img src="http://ldlocal.web44.net/test2/img/gallery0.jpg"> 
    </div> 

</body> 
</html>

источник

2013-02-21 17:17:51 Ryan

Изменение размера элементов jQuery

ответ

Смежные вопросы