javascript - jQuery Cycle 插件：在调整浏览器大小时使背景图像居中

Question

我有一个使用 jQuery Cycle 插件的幻灯片，用背景图像更改 div（图像非常宽，如果浏览器较小，它们应该居中并切断）。

<div class="banner_images">
    <div style="background-image:url(banners/1.jpg)"></div>
    <div style="background-image:url(banners/2.jpg)"></div>
    <div style="background-image:url(banners/3.jpg)"></div>
</div>

在应用 Cycle 之前，调整浏览器窗口大小时页面的行为完全符合预期：http: //30daysoffalafel.com/test/index-nojs.html

应用循环后，当调整浏览器大小时，背景图像不会保持居中。刷新浏览器可以解决问题。 http://30daysoffalafel.com/test/

<script>
    $(document).ready(function() {
    $('.banner_images').cycle({
            fx: 'fade',
            pager: '.banner_controls div'
        });
    });
</script>

关于如何更改行为以使图像背景以浏览器为中心在应用循环后以相同方式调整大小的任何想法？我不希望在调整窗口大小时添加 js 来刷新。

提前感谢您的任何建议。

Answer 1

尝试

$('.banner_images').cycle({
    fx: 'fade',
    pager: '.banner_controls div',
    fit: 1,
    width: '100%',
    slideResize: true,
    containerResize: false
});