jQuery bxSlider - 高度和宽度设置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20759184/
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 - height and width settings
提问by Darkry
I justed started using bxSlider and I ran into a problem. I want a slider with fixed width (all images have the same value) and adaptive height. It is a pretty standard task, but I'm stuck and I don't know what to do. Right now bxSlider is resizing my images (which it should not do) and the height is static. Another problem is that the slider is not centered on the page and do not have the right width.
我刚开始使用 bxSlider，但遇到了问题。我想要一个具有固定宽度（所有图像具有相同值）和自适应高度的滑块。这是一个非常标准的任务，但我被卡住了，我不知道该怎么办。现在 bxSlider 正在调整我的图像大小（它不应该这样做）并且高度是静态的。另一个问题是滑块不在页面中央并且宽度不正确。
Example size is no longer available.
示例尺寸不再可用。
This is my jQuery initialization code:
这是我的 jQuery 初始化代码：
$(window).load(function() {
$('.bxslider').bxSlider({
mode: 'fade',
captions: true,
pagerCustom: '#bx-pager',
adaptiveHeight: true
});
});
and the relevant HTML code can be found on the page (source code line 53).
相关的 HTML 代码可以在页面上找到（源代码第 53 行）。
EDIT:
编辑：
Right now the centering problem is solved but bxSlider is still deforming the images to have the same height AND the same width. I just want them to have the same width (which the original images have) and the height to be adaptive.
现在居中问题已解决，但 bxSlider 仍在将图像变形为具有相同的高度和相同的宽度。我只希望它们具有相同的宽度（原始图像具有）和高度是自适应的。
采纳答案by webdeveloper
What about slideWidthproperty, from page with bxslider options
什么slideWidth财产，从bxslider页选项
The width of each slide. This setting is required for all horizontal carousels!
Like this:
像这样：
$('.bxslider').bxSlider({
mode: 'fade',
captions: true,
pagerCustom: '#bx-pager',
adaptiveHeight: true,
slideWidth: 150
});
Added:
添加：
.bx-wrapper img {
margin: 0 auto;
}
回答by Sneha S
Setting up a height & width for images on media breakpoints did work for me.
在媒体断点上为图像设置高度和宽度对我有用。
.bx-wrapper img {
width: 140px;
height: 140px;
}
@media screen and (max-width: 767px) {
.bx-wrapper img {
width: 70px;
height: 70px;
}
}
