Отзывчивое центрирование и обрезка нефонового изображения

Я создаю отзывчивый ползунок фото и текста, который масштабирует горизонтальное изображение с внешней оболочкой для больших размеров окна, а затем использует переполнение: скрытый с отрицательным полем ( (wrapperWidth - imageWidth)/2 ) и максимальную ширину изображения 400% для меньшего окна размеры. Это позволяет отображать обрезанное по центру портретное изображение.

<div class="slider">
    <ul class="slides">
        <li><a href=""><img alt="" src="image.jpg"/></a> 
        <div class="caption">
           <h2><a href="">Large Caption</a></h2>
           <p><a href="">Small Caption</a></p>
        </div>  
    </li>
    etc.etc.
</div>

.slider .slides li{
    width: 100%;
    overflow: hidden;
}
.slider .slides img{
    max-width: 400%;
}
etc.


$(window).resize(function(){
    var container = $('.slider');
    imageWidth =container.find('.slides img').width();
    wrapperWidth =container.find('.slides').width();
    margin = (wrapperWidth - imageWidth) / 2;
    container.find('.slides img').css('margin-left', margin)
});

Вопрос

Настройка отлично работает при загрузке страницы, но при изменении размера окна браузера Jquery, кажется, теряет ширину изображения (возвращает 0) в случайные моменты времени, при этом правильно вычисляя ширину оболочки. Это затем вычисляет неправильное значение поля и не центрирует изображение.

Любая идея, почему это может происходить?


jquery css responsive-design image-resizing
person user2018635    schedule 28.01.2013    source источник
comment
это может быть связано с тем, что container.find('.slides img') может возвращать массив, попробуйте что-то вроде container.find('.slides img:eq(0)')   -  person Pete    schedule 28.01.2013

Ответы (1)


arrow_upward
0
arrow_downward

Я думаю, что это сработает. Я не тестировал:

$(function() {
$(window).on("resize", function()
    {
        var container = $(".slider");
        imageWidth =container.find(".slides img:eq(0)").width();
        wrapperWidth =container.find(".slides").width();
        margin = (wrapperWidth - imageWidth) / 2;
        container.find(".slides img").css({"margin-left": margin})
    });
});
person ROY Finley    schedule 28.01.2013