css - Bxslider 设置高度

Question

所以我刚开始使用bxslider。

但是，我在设置滑块的大小时遇到问题。自然它需要最大元素的高度（我认为）。如何将其设置为固定高度，例如 200 像素？

score 25 · Accepted Answer

您可以添加以下 CSS。

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

看看这个小提琴.. bxslider

score 15 · Accepted Answer

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

如果您使用列表：

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

score 7 · Accepted Answer

您需要设置与显示的图像高度相关的所有 3 个元素，它们是主容器、内部容器和图像本身......

像这样：

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

我应该注意：
bxSlider 使用 100% 宽度来保持响应，因此您可能会通过强制高度获得扭曲的图像，这就是为什么您需要为滑块提供预先调整大小的图像（只是为了解决高度问题.. )
解决方案：
在移动设备中查看时使用媒体查询设置不同的高度（只是一个建议）

祝你好运……

score 3 · Accepted Answer

这对我有用，并且可以让您保持响应能力

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

score 1 · Accepted Answer

我用这些线解决了居中和固定大小

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

}

score 0 · Accepted Answer

更新！

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

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

score 0 · Accepted Answer

我建议用一个div然后调整div的 CSS 来包装它。我相信 Bxslider 继承了高度和宽度。

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

从这里您可以li相应地调整 's：

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

希望这可以帮助。

score 0 · Accepted Answer

0

只需使用max-height：

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

于 2018-07-13T09:36:51.007 回答

score 0 · Accepted Answer

如果你不想使用 !important 就这样

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

9 回答 9