滑塊高度技巧

Question

我有一個自舉傳送帶的代碼。但是，當窗口減小到更小的屏幕時，高度不會下降。我用過JQuery，但仍然面臨問題。

<div class="container-fluid nopad"> 
    <div class="row-fluid nopad"> 
     <div class="col-lg-12 top_slider"> 
      <!-- Slider --> 
      <div class="carousel slide" id="carousel_top" data-ride="carousel"> 
       <div class="carousel-inner" role="list-box"> 
        <div class="item active"> 
         <img src="img/slides/slide-01.png"> 
        </div> 
        <div class="item"> 
         <img src="img/slides/slide-02.png"> 
        </div> 
        <div class="item"> 
         <img src="img/slides/slide-03.png"> 
        </div> 
       </div> 
      </div> 
      <!-- End --> 
     </div> 
    </div> 

CSS是

.top_slider{ 
    width:100%; 
    height:auto; 
    background:#f2f2f2; 
    overflow:hidden; 
    padding:0 !Important; 

} 
.top_slider .carousel{ 
    width:100%; 
} 
.top_slider .carousel-inner .item{ 
    height:400px; 
    width:100%; 
} 
.top_slider .carousel-inner .item img{ 
    width:100%; 
    position:absolute; 
    top:50%; 
    transform:translateY(-50%); 
    -webkit-transform:translateY(-50%); 
    -moz-transform:translateY(-50%); 
    z-index:1; 
} 

當檢查我在我的智能手機文件，讓這個同樣的問題。我不知道我的JQuery代碼有任何錯誤。這是我在你.item元素的height:400px使用

$(document).ready(function(){ 
    var obj_height_on_ready= $('.top_slider .carousel-inner .item img').height(); 
    if($(window).width() <= 769){ 
      $('.top_slider .carousel-inner .item').css({"height": obj_height_on_ready}); 
      $('.short_desc_tab').text(obj_height_on_ready); 
     } 
     else{ 
      $('.top_slider .carousel-inner .item').css({"height": "400"}); 

     } 


}); 

Answer 1

問題造成的代碼。此外，.item元素內的圖像是絕對定位的。用以下替換您的.top_slider .carousel-inner .item img，並且傳送帶完全響應。你甚至不需要你的jQuery。

.top_slider .carousel-inner .item img { 
    display: block; 
    width: 100%; 
    height: auto; 
}