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

您应该将高度应用于img内的li标记，这会拉伸图像的高度以适合容器，并通过将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/

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

1 个答案: