Bxslider设置高度

Question

所以我刚开始使用bxslider。

但是我有问题设置滑块的大小。当然，它需要最大元素的高度（我认为）。我如何将它设置为固定高度，比如说200px？

Answer 1

您可以添加以下css。

.bx-wrapper, .bx-viewport { 
    height: 200px !important; //provide height of slider 
} 

看看这个小提琴.. bxslider

Answer 2

为什么不样式的元素？ 如果您为包装设置了固定高度，则可能会遇到溢出和定位问题。

如果您使用的列表：

.bx-wrapper ul li { height: 200px; } 

Answer 3

我会建议用div然后调整div的CSS加以包装。 Bxslider我相信继承了宽度的高度&。

.yourDivClass{ 
    height:200px; 
    width:200px; 
} 

从这里你可以调整li的相应：

.yourDivClass li { 
    background-color:green; //just to see the overflow if height & width isn't equal 
} 

希望这有助于。

Answer 4

您需要设置涉及显示的图像的高度，所有3个元件，其主容器，内部容器和图像本身...

像这样：

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

• 我应该注意的是：
  bxSlider使用100％的宽度，以保持响应的东西，所以你可能迫使高度得到一个扭曲的图像，这就是为什么您要为PR电子大小的图像到滑块（只是为了解决这个问题高度..）

• 溶液：在移动观察时（只是一个建议）
  使用媒体查询设定不同的高度

祝你好运...

Answer 5

更新！

http://jsfiddle.net/u62LR/

只需设置你的图像高度...

.bx-wrapper, .bx-viewport { 
    height: [IMAGE HEIGHT] !important; 
} 

Answer 6

我解决中心和固定的大小与这些线

.bx-wrapper img { 
height: 400px; 
max-width: auto; 
display: inline; 

}

Answer 7

这为我工作，并让你随时响应

.bx-wrapper, .bx-viewport, .bx-wrapper img {max-height: 200px !important;} 

Answer 8

如果你不” t要使用！重要的只是这样做

.bx-wrapper { 
    height: 400px; //Just choose your height 
    display: block; 
    overflow: hidden; 
}