Изменение размера контейнера изображения до кратного значения (при загрузке, изменении ориентации и изменении размера)

Мне нужно улучшить скрипт jquery, который привязывает высоту контейнеров изображений к базовой сетке. Я хочу, чтобы это работало во время изменения размера окна.

До сих пор я применял следующее к контейнерам изображений, для которых переполнение установлено как скрытое. Некоторые из них были вдохновлены вопросами, заданными здесь и здесь.

/* Updates height on $(window).load(function(){}); */
$(window).load(function(){

    /* Adjust media container heights and image margins */
    function containerHeight(){
        var targetContainer = 'div.media';
        $(targetContainer).each(function(){
            var targetHeight = Math.round($(this).height() / 20) * 20 - 8;
            if($(this).height() < targetHeight){
                var newHeight = targetHeight - 20;
            }else{
                var newHeight = targetHeight;
            }
            $(this).css({
                'height': newHeight
            });
        });
        $(targetContainer).children('img').each(function(){
            $(this).css({
                'margin-top': Math.round(($(this).parent(targetContainer).height() - $(this).height()) / 2 )
            });
        });
    }
    containerHeight();
    /* Does not update height on $(window).bind('resize', function(){}); with <body class="full"> */
    $(window).bind('resize', function(){
        containerHeight();
    });

});

Однако моя пасти на http://pastie.org/2846491 работает только для контейнеров с фиксированной шириной.

Мне нужно, чтобы это работало для ширины/высоты жидкого контейнера, во время/после изменения размера окна и мобильной ориентации: изменения портретной/ландшафтной ориентации, сохраняя при этом вещи в базовой сетке.

Любые указатели на то, как я должен подойти к этому? Пожалуйста помоги!


image jquery grid math baseline
person Flo    schedule 10.11.2011    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Недавно у меня была эта проблема, и я придумал решение. Не самое элегантное/эффективное решение, но, безусловно, работоспособное:

var fontSize = 20;
var lineHeight = 28;

$(window).resize(function() {
    $('img').each(function() {
        var heightDif = $(this).outerHeight();
        $(this).css('margin-bottom', fontSize + heightDif % lineHeight);
    });
});
$('img').load(function() { $(window).resize(); });

Код срабатывает всякий раз, когда изменяется размер окна, и вычисляет разницу между высотой изображения и следующей нижней базовой линией. Затем он добавляет разницу к нижнему полю. Событие сначала срабатывает при загрузке img (вот возможность для большей эффективности).

Надеюсь, это поможет; если у вас есть какие-либо улучшения, которые сделают его лучше, я хотел бы знать, чтобы я мог реализовать их в своем коде!

person Jordan Koschei    schedule 24.11.2011