基本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

您应该应用高度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/