基本的jquery滑块图像大小无法调整大小

巴里·瓦茨

我有一个基本的jquery滑块,我已对其进行了大小调整。

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

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

在我网站上的这段代码中

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

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

如果我将高度和宽度设置为一个数字,例如height:700 width: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 -->
考克拉宁

您应该对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/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

轮播/滑块图像无法正确调整大小

来自分类Dev

无法正确调整图像大小

来自分类Dev

无法动态调整图像大小

来自分类Dev

使用CSS之前和之后的滑块...无法调整小于原始宽度的图像的大小

来自分类Dev

使用CSS之前和之后的滑块...无法调整小于原始宽度的图像的大小

来自分类Dev

云功能:调整大小的图像无法加载

来自分类Dev

Bootstrap Carousel无法调整图像大小

来自分类Dev

无法调整引导模板中图像的大小

来自分类Dev

Bitmap.createScaledBitmap 无法调整图像大小

来自分类Dev

Bootstrap滑块标题调整大小

来自分类Dev

使用CSS调整滑块大小

来自分类Dev

使用CSS调整滑块大小

来自分类Dev

无法根据Bootstrap列大小调整图像大小

来自分类Dev

jQuery-调整图像大小以适合div

来自分类Dev

加载前调整图像大小-jQuery

来自分类Dev

在脚本jQuery中调整图像大小

来自分类Dev

在脚本jQuery中调整图像大小

来自分类Dev

jQuery:在调整大小的图像上冒烟

来自分类Dev

Colorbox上的jQuery图像调整大小

来自分类Dev

在调整窗口大小时重置滑块JavaScript(非jQuery)

来自分类Dev

调整窗口大小时修改图像大小(jQuery)

来自分类Dev

在jQuery中调整图像大小无法在所有图像上使用

来自分类Dev

调整Java图像大小

来自分类Dev

Codeigniter图像调整大小?

来自分类Dev

停止调整图像大小

来自分类Dev

调整Vaadin图像大小

来自分类Dev

调整画布图像的大小

来自分类Dev

快速调整图像大小

来自分类Dev

Codeigniter图像调整大小?