of滑块和bxsldier寻呼机的控制高度

Question

我用my滑块显示我的图像。问题是我不能正确处理of滑块的高度。我有主图片和缩略图来滚动像这样的图片。

<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也改变了缩略图的高度。因此，我用<div class="main_pic"></div>和<div class="thumb_pic"></div>包装每个<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之类的东西正确地调整图像大小，那么根本不需要修改高度。

下面是is滑块源代码中的一个片段。

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