CSS Bxslider 设置高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18976107/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bxslider Setting Height
提问by John Kariuki
So I just started using bxslider.
所以我刚开始使用 bxslider。
I however I'm having issues setting the size of the slider. Naturally it takes the height of the largest element (I think). How do I set it to a fixed height, say 200px?
但是，我在设置滑块的大小时遇到了问题。自然它需要最大元素的高度（我认为）。如何将其设置为固定高度，例如 200px？
回答by nik
回答by Mihai Alex
Why not style the elements? If you set a fix height for the wrapper you could get in trouble with overflows and positioning.
为什么不设计元素？如果为包装器设置固定高度，则可能会遇到溢出和定位问题。
If you are using lists:
如果您使用列表：
.bx-wrapper ul li { height: 200px; }
回答by Sagive SEO
You need to set all 3 elements involved with the height of the image displayed which are the main container, the inner container and the images themselves...
您需要设置与显示图像高度相关的所有 3 个元素，它们是主容器、内部容器和图像本身...
like so:
像这样：
.bx-wrapper, .bx-viewport, .bx-wrapper img {height: 500px !important;}
i should note that:
bxSlider uses 100% width to keep stuff responsive so you might get a distorted image by forcing the height, and that is why you need to serve pre-sized images to the slider (just to fix the height issue..)solution:
use media queries to set a different height when viewed in mobile (just a suggestion)
我应该注意的是：
bxSlider 使用 100% 宽度来保持内容响应，因此您可能会通过强制高度来获得扭曲的图像，这就是为什么您需要为滑块提供预大小的图像（只是为了解决高度问题.. )解决方案：
在移动端查看时使用媒体查询设置不同的高度（只是一个建议）
best of luck...
祝你好运...
回答by Will Noon
This worked for me, and allows you to keep responsiveness
这对我有用，并且可以让您保持响应能力
.bx-wrapper, .bx-viewport, .bx-wrapper img {max-height: 200px !important;}
回答by Edson Q. Paredes
I solved centering and fixed size with these lines
我用这些线解决了居中和固定尺寸
.bx-wrapper img {
height: 400px;
max-width: auto;
display: inline;
}
}
回答by Marco Gonzaga
If you don't want use !important just make like this
如果你不想使用 !important 就这样
.bx-wrapper {
height: 400px; //Just choose your height
display: block;
overflow: hidden;
}
回答by Marco Gonzaga
Just use the max-height:
只需使用max-height：
.bx-wrapper .bx-viewport{max-height: 657px;}
回答by Ico Portela
Update!
更新！
Just set your image height...
只需设置您的图像高度...
.bx-wrapper, .bx-viewport {
height: [IMAGE HEIGHT] !important;
}
回答by m33bo
I would recommend wrapping it with a divthen adjusting the div's CSS. Bxslider I believe inherits the height & width.
我建议用 a 包裹它，div然后调整div的 CSS。我相信 Bxslider 继承了高度和宽度。
.yourDivClass{
height:200px;
width:200px;
}
From here you can adjust the li's accordingly:
从这里您可以相应地调整li's：
.yourDivClass li {
background-color:green; //just to see the overflow if height & width isn't equal
}
Hope this helps.
希望这可以帮助。
