basic jquery slider image sizes not resizable

Question

I have a basic jquery slider that i have made resizable.

the container resizes but the inner images do not.

I have created a jsfiddle to show this. http://jsfiddle.net/B9nVy/48/

in this bit of code on my site

$('#banner').bjqs({
    'animation': 'slide',
    'width': 700,
    'height': 300,

if I set height and width to 100% then the images resize, but the slider stops working

If I set the height and width to a number say height:700 width:300 then the container will only resize keeping the scale, so the user cannot change the ratio to say 300x300 and the max height and width stays at the set height and width

does anyone know how I can over come this

code

css:

    ul.bjqs {
         position:relative;
         list-style:none;
         padding:0;
         margin:0;
         overflow:hidden;
         display:none;
    }
    li.bjqs-slide {
        display:none;
        position:absolute;
    }
    ul.bjqs-controls {
        list-style:none;
        margin:0;
        padding:0;
        z-index:9999;
    }
    ol.bjqs-markers {
        list-style:none;
        margin:0;
        padding:0;
        z-index:9999;
    }
    ol.bjqs-markers li {
        float:left;
    }
    p.bjqs-caption {
        display:block;
        width:100px;
        margin:0;
        padding:2%;
        position:relative;
        bottom:0;
    }
    /* demo styles */

    #banner {
        height:300px;
        width:700px;
        margin:0 auto;
        position:relative;
        background:#fff;
        border:2px #000 solid;

    }
    ul.bjqs-controls li a {
        display:block;
        padding:5px 10px;
        position:absolute;
        background:#fff;
        color:#fd0100;
        text-decoration:none;
        text-transform:uppercase;
    }
    li.bjqs-slide div {
        background-color:#EEE;
        border:2px solid #000;
        height:200px;
    }
    a.bjqs-prev {
        left:0;
    }
    a.bjqs-next {
        right:0;
    }
    p.bjqs-caption {
        background:rgba(0, 0, 0, 0.7);
        color:#fff;
        text-align:center;
    }
    ol.bjqs-markers {
        position:absolute;
        bottom:-50px;
    }
    ol.bjqs-markers li {
        float:left;
        margin:0 3px;
    }
    ol.bjqs-markers li a {
        display:block;
        height:10px;
        width:10px;
        border:4px solid #fff;
        overflow:hidden;
        text-indent:-9999px;
        background:#000;
        border-radius:10px;
        box-shadow:0 0 50px rgba(0, 0, 0, 0.5);
    }
    ol.bjqs-markers li.active-marker a {
        background:#fd0100;
    }

js:

    $('#banner').bjqs({
        'animation': 'slide',
            'width': 700,
            'height': 300,
            'automatic': true,
            'animspeed': '3000',
            'showControls': true,
            'centerControls': true,
            'centerMarkers': false,
            'useCaptions': true

    });
    $(function () {
        $("#banner").resizable();
    });

html:

        <div id="banner">
        <!-- start Basic Jquery Slider -->
        <ul class="bjqs">
            <li>
                <img src="http://2.bp.blogspot.com/_irPxcWyLEmo/TP8k1GUp3LI/AAAAAAAAAD0/wIGvKoqhb-M/s320/African_Lion_King.jpg" title="lion" />
            </li>
            <li>
                <img src="http://static.tumblr.com/27c8612a25c299f98004c15b155cefad/ogbqjed/k2Bmmp0ut/tumblr_static_giraffes_wallpapers_156.jpg" title="giraffe" />
            </li>
            <li>
                <img src="http://embc.gov.bc.ca/em/hazard_preparedness/wildlife_info_page_photo-05-large.jpg" title="bear" />
            </li>
        </ul>
        <!-- end Basic jQuery Slider -->
    </div>
    <!-- End outer wrapper -->

Answer 1

You should apply height to img tag inside li, this will stretch height of image to fit container, and to center image by adding text-align:center rule to its container:

ul.bjqs img {
    height:100%;    
}

ul.bjqs {
    text-align:center;
}

Live fiddle: http://jsfiddle.net/DzFaP/

Depending on how you need to fit image you may want to stretch image by width instead of height:

ul.bjqs img {
    width:100%;
}

Fiddle: http://jsfiddle.net/keaukraine/fhbb4/