全宽滑块图像调整大小

Question

我有一个全宽滑块，不能按照我想要的方式工作。

当将窗口大小调整为特定大小时，图像会在其下方的div后面。我只是希望它与窗口一起调整大小，保持整个图像可见。

我也做了一个jsfiddle，但不确定它会有所帮助：http://jsfiddle.net/ThDRr/

谢谢！

HTML：

<div class="JB_FWS">

    <!-- Container holding the slides -->
    <div class="JB_Container">


        <div class="JB_Slide">
            <!-- SET BACKGROUND FOR THE SLIDE -->

            <!-- /SET BACKGROUND FOR THE SLIDE -->
            <div class="JB_Slide_Content">     
                <!-- PLACE YOUR SLIDE CONTENT HERE -->

                <img src="slideimg/productexample.jpg" alt="gallery slide" width="100%" />
                <!-- /PLACE YOUR SLIDE CONTENT HERE -->
            </div>
        </div>

              <div class="JB_Slide">
            <!-- SET BACKGROUND FOR THE SLIDE -->

            <!-- /SET BACKGROUND FOR THE SLIDE -->
            <div class="JB_Slide_Content">     
                <!-- PLACE YOUR SLIDE CONTENT HERE -->
                <img src="slideimg/productexample2.jpg" alt="gallery slide" width="100%" />
                <!-- /PLACE YOUR SLIDE CONTENT HERE -->
            </div>
        </div>


        <div class="JB_Slide">
            <!-- SET BACKGROUND FOR THE SLIDE -->

            <!-- /SET BACKGROUND FOR THE SLIDE -->
            <div class="JB_Slide_Content">     
                <!-- PLACE YOUR SLIDE CONTENT HERE -->
                <img src="slideimg/productexample3.jpg" alt="gallery slide" width="100%"  />


                </div>
                <!-- /PLACE YOUR SLIDE CONTENT HERE -->
            </div>
        </div>

                    <!-- Read More Button -->
                </div>
                <!-- /PLACE YOUR SLIDE CONTENT HERE -->
            </div>
        </div>





    </div>
    <!-- /Container holding the slides -->

    <!-- Left Button (PREV) -->
    <div class="JB_Button_Left_BG"></div>
    <div class="JB_Button_Left"></div>
    <!-- /Left Button (PREV) -->

    <!-- Right Button (NEXT) -->
    <div class="JB_Button_Right_BG"></div>
    <div class="JB_Button_Right"></div>
    <!-- /Right Button (NEXT) -->

    <!-- Pagination -->
    <div class="JB_Pagination">
        <div class="JB_Pages">
        </div>
    </div>
    <!-- /Pagination -->

    <!-- 
        Top Border Classes:
        - JB_Border Top Paper
        - JB_Border Top ZigZag
        - JB_Border Top
    -->
    <div class="JB_Border Top Paper"></div>
    <!-- /Top Border -->

    <!-- 
        Bottom Border Classes:
        - JB_Border Bottom Paper
        - JB_Border Bottom ZigZag
        - JB_Border Bottom
    -->
    <div class="JB_Border Bottom Paper"></div>
    <!-- Bottom Border -->
</div>

CSS：

body { 
    margin:0;
    padding:0;
}

.JB_FWS * {
    margin:0;
    padding:0;
}

.JB_FWS {
    width:100%;
    height:901px;
    background:#343234;
    float:left;
    position: relative;
    overflow: hidden;
    z-index:-1;
}

.JB_Border {
    width:100%;
    height:0px;
    position: absolute;
}


.JB_Button_Left {
    padding:15px;
    width:21px;
    height:30px;
    background-image: url("../img/left_arrow.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    position: absolute;
    top:50%;
    left:0;
    cursor: pointer;
}

.JB_Button_Left_BG {
    padding:15px;
    width:21px;
    height:30px;
    background-color:#000;
    opacity:0.44;
    position: absolute;
    top:50%;
    left:0;
}

.JB_Button_Right {
    padding:15px;
    width:21px;
    height:30px;
    background-image: url("../img/right_arrow.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    position: absolute;
    top:50%;
    right:0;
    cursor: pointer;
}

.JB_Button_Right_BG {
    padding:15px;
    width:21px;
    height:30px;
    background-color:#000;
    opacity:0.44;
    position: absolute;
    top:50%;
    right:0;
}

.JB_Container {

    width:9999px;
    height:430px;
    margin:0 auto;
    position: absolute;
    overflow: hidden;
    left:0;

    cursor:hand;
    cursor:grab!important;
    cursor:-moz-grab;
    cursor: url(https://mail.google.com/mail/images/2/openhand.cur), pointer!important;
    cursor:-webkit-grab;
}

.JB_Slide {
    height:901px;
    float:left;
    position: relative;
}

.JB_Slide_Content {
    width:100%;
    margin: 0 auto;
    margin-top:0;
    position: relative;
    background-color:#333334;
}

.JB_Pagination {
    width:100%;
    height:12px;
    position: absolute;
    bottom:15px;
    left:0;
}

.JB_Pages {
    display: table;
    margin: 0 auto;
}

.JB_Page {
    background-image:url("../img/pagination_button.png");
    background-repeat: no-repeat;
    background-position: 0px 0px;
    width:13px;
    height:12px;
    float:left;
    margin-left:5px;
    cursor: pointer;
}
.JB_Page:hover, .JB_Page.active  {
    background-position: -13px 0px;
}

.JB_ReadMore {
    float:left;
    color:#fff;
    margin-top:15px;
    position: relative;
}

.JB_ReadMore_BG {
    top:0;
    lef:0;
    position: absolute;
    background:#000;
    opacity:0.44;
    width:100%;
    height:100%;
}

.JB_ReadMore a {
    padding:10px 30px 10px 20px;
    position: relative;
    float:left;
    font-family: Arial, Helvetica, sans-serif;
    color:#FFF;
    font-weight: bold;
    text-decoration: none;
    list-style: none;
    background-image:url("../img/button_arrow.png");
    background-repeat: no-repeat;
    background-position: 90% 50%;
    font-size: 12px;
}