基本 jquery 滑块图像大小不可调整大小

Question

我有一个基本的 jquery 滑块，可以调整大小。

容器会调整大小，但内部图像不会。

我创建了一个 jsfiddle 来展示这一点。 http://jsfiddle.net/B9nVy/48/

在我网站上的这段代码中

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

如果我将高度和宽度设置为 100%，则图像会调整大小，但滑块停止工作

如果我将高度和宽度设置为一个数字，例如高度：700 宽度：300，那么容器只会在保持比例的情况下调整大小，因此用户无法将比例更改为 300x300，并且最大高度和宽度保持在设置高度和宽度

有谁知道我该如何克服这个问题

代码

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

您应该将高度应用于li 内的img 标签，这将拉伸图像的高度以适合容器，并通过将text-align:center 规则添加到其容器来使图像居中：

ul.bjqs img {
    height:100%;    
}

ul.bjqs {
    text-align:center;
}

现场小提琴：http://jsfiddle.net/DzFaP/

根据您需要如何适应图像，您可能希望按宽度而不是高度来拉伸图像：

ul.bjqs img {
    width:100%;
}

小提琴：http://jsfiddle.net/keaukraine/fhbb4/