jquery - アニメーションを維持しながら、jQuery を 100% 幅にすることができます

Question

スライドショーが思い通りに動かないという問題があります。

基本的に、ページ幅全体 (100%) にする必要がある 2 つの画像があります。次に、ブラウザのサイズを変更/縮小すると、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>

任意の助けをいただければ幸いです