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