可以在保持动画的同时使 jQuery 100% 宽度

Question

我遇到了无法正常工作的幻灯片问题。

基本上我有两张图片，我需要它们是整个页面宽度（100%）。然后，当浏览器重新调整大小/缩小时，我需要它们保持在 div 的中心/顶部，但边缘会被裁剪掉。

我已经设法让它与第一个 div 标签一起工作，但是一旦它动画调整大小的能力就会停止，我只是得到一个水平滚动条。

有什么想法吗？我卡住了！

#animatedbannerkitchen {
    float: left;
    height: 381px;
    width: 100%;
    position: relative;
    margin-bottom: 20px;
}
.slideshow {
    float: left;
    height: 381px;
    width: 100%;
    position: relative;
    margin-bottom: 20px;
}
#bannerone {
    background-image: url(purchase-tableware.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    float: left;
    width: 100%;
    position: relative;
    height: 381px;
    background-size: cover; 
}
#bannertwo {
    background-image: url(tasty-plate.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    float: left;
    width: 100%;
    position: relative;
    height: 381px;
    background-size: cover; 
}






 <!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>

<!--  initialize the slideshow when the DOM is ready scrollLeft -->
<script type="text/javascript"> 
$(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'fade',
        speed: 1500,
         slideResize: false,
        timeout: 7000// choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });
});
</script>

最后是正文内容

<div id="animatedbannerkitchen">
  <div class="slideshow">
    <div id="bannerone"></div>
    <div id="bannertwo"></div>    
  </div>
</div>

任何帮助将不胜感激

Answer 1

$(window).onLoad(function() {
  var windowWidth = $(window).width();
  $('#bannerone').css('background-width', windowWidth);
  $('#bannertwo').css('background-width', windowWidth);
});

或者

$(window).onLoad(function() {
  var bannerOneWidth= $('#bannerone').width();
  $('#bannerone').css('background-width', bannerOneWidth);
  var bannerTwoWidth= $('#bannertwo').width();
  $('#bannertwo').css('background-width', bannerTwoWidth);
});