可以使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);
});