jquery - 响应式居中和裁剪非背景图像

Question

我正在创建一个响应式照片和文本滑块，它使用外部包装器缩放水平图像以用于大窗口大小，然后使用溢出：隐藏负边距（ (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），同时仍然正确计算包装器宽度。然后，这会计算出不正确的边距值，并且不会使图像居中。

知道为什么会发生这种情况吗？

Answer 1

我认为这会奏效。我没有测试过：

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