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

您需要设置所有涉及图像高度的3个元素，这些元素是主要容器，内部容器和图像本身......

喜欢这样：

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

• 我应该注意：
  bxSlider使用100％宽度来保持内容的响应性，因此您可能会通过强制高度来获得扭曲的图像，这就是为什么您需要将预先调整大小的图像提供给滑块（仅用于修复高度问题..）

• 溶液：
  在移动设备上查看时使用媒体查询设置不同的高度（只是建议）

祝你好运......

Answer 4

这对我有用，并且可以让你保持回应

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

Answer 5

我用这些线解决了居中和固定尺寸

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

}

Answer 6

我建议用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 7

更新！

http://jsfiddle.net/u62LR/

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

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

Answer 8

如果你不想使用！重要的就是这样做

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

Answer 9

只需使用max-height：

.bx-wrapper .bx-viewport{max-height: 657px;}