Question

我有一个bxSlider实例，我想要适合800x800像素div。但是，视口的样式属性将其设置为最高图像的高度，例如

<div class="bx-viewport" style="width: 100%; overflow: hidden; 
position: relative; height: 1064px;">

即使最高的图像不是第一张幻灯片，也会发生这种情况。有没有办法用CSS控制bxSlider的高度？（我也需要让它响应）。

这是标记：

<ul class="slideshow">
  <li>
    <img src="http://localhost/test/3-1000x673.jpg" alt="" />
    <p>Caption for this image</p>
  </li>
  <li>
    <img src="http://localhost/test/5-1000x1457.jpg" alt="" />
    <p>Another caption for this image</p>
  </li>
  <li>
    <img src="http://localhost/test/8-1000x1634.jpg" alt="" />
    <p>The tallest image</p>
  </li>
</ul>

和bxSlider配置：

jQuery(document).ready(function($){
    $('.slideshow').bxSlider({
        auto: true,
        autoHover: true,
        autoDelay: 1000,
        adaptiveHeight: false,
        mode: 'horizontal'
    });
});

谢谢

Answer 1

我有同样的问题，对于你的情况，我希望这会解决它：

<style>
.slideshow {width: 800px; max-height: 800px; overflow: hidden; }
</style>

max-height和overflow hidden用于隐藏加载过程中可见的第二个或更多图像。

具有居中图像的固定高度bxSlider

1 个答案: