Управление высотой bxslider и bxsldier-pager

Question

Я использую bxslider для отображения моих изображений. Дело в том, что я не могу правильно обрабатывать высоту bxslider. У меня есть основное изображение и миниатюра для прокрутки изображений, подобных этому.

<div class="main_pic"> 
       <ul id="bxslider"> 

        <li><img src="<%= @house.main_img %>" alt="" title="" /> </li> 


        <% @users_img.each do |i| %> 
        <li><img src="<%= i.img %>"/> </li> 
        <% end %> 
       </ul> 
       </div> 
    <!-- The thumbnails --> 
       <div class="thumb_pic"> 
       <ul id="bxslider-pager"> 

        <li data-slideIndex="0"><a href=""><img style="max-height:55px" src="<%= @house.main_img %>" ></a></li> 

        <% @indexcounter=1 %> 
        <% @users_img.each do |i| %> 
        <li data-slideIndex="<%= @indexcounter %>"><a href=""><img style="max-height:55px" src="<%= i.img %>" ></a></li> 
        <% @indexcounter += 1 %> 
        <% end %> 
       </ul> 
       </div> 

Я попытался установить мой CSS, как

.bx-wrapper, .bx-viewport, .bx-wrapper { 
    height: 450px !important; 
} 

Но это CSS изменяет высоту эскиза также. Итак, я обернуть каждый <ul> с <div class="main_pic"></div> и <div class="thumb_pic"></div> и изменить его высоту, как

.main_pic { 
     height: 350px !important; 
     max-height:350px; 
    } 
    .thumb_pic { 
     height: 50px !important; 
     max-height:50px; 
    } 

Однако, это ломает мои картины, как не хватает какой-то части изображения, или переполнение DIV по размеру изображения. Какие-либо предложения? Благодарю.

Answer 1

Код bxsilder вычисляет высоту самого высокого изображения в своих дочерних элементах. Если вы правильно оцениваете свои изображения с помощью чего-то вроде Photoshop, вам не нужно изменять высоту вообще.

Вот фрагмент исходного кода bxslider.

// if not "vertical" mode, calculate the max height of the children 
height = Math.max.apply(Math, children.map(function() { 
    return $(this).outerHeight(false); 
}).get()); 

https://github.com/stevenwanderski/bxslider-4/blob/master/src/js/jquery.bxslider.js