Slider Höhe Technik

Question

Ich habe einen Code für Bootstrap Karussell. Wenn das Fenster jedoch auf einen kleineren Bildschirm verkleinert wird, nimmt die Höhe nicht ab. Ich habe JQuery verwendet, aber immer noch mit Problemen konfrontiert.

<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 ist

.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; 
} 

Wenn meine Datei in meinem Smartphone Überprüfung, immer das gleiche Problem. Ich weiß nicht, dass mein JQuery-Code einen Fehler aufweist. Dies ist der Code i

$(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

Das Problem wird durch die height:400px Ihrer .item Elemente verursacht wird, verwendet haben. Außerdem sind Ihre Bilder innerhalb der .item Elemente absolut positioniert. Ersetzen Sie Ihre .top_slider .carousel-inner .item img durch die folgenden, und das Karussell reagiert vollständig. Sie brauchen nicht einmal Ihre jQuery.

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