Высота установки Bxslider

Question

Высота установки Bxslider

Поэтому я только начал использовать bxslider.

Однако у меня возникают проблемы с настройкой размера слайдера. Естественно, это занимает высоту самого большого элемента (я думаю). Как установить фиксированную высоту, скажем, 200 пикселей?

11

css height bxslider

Источник

user2732794 24 сен '13 в 08:05

9 ответов

Другие вопросы по тегам css height bxslider

user1047988 24 сен '13 в 08:16 2013-09-24 08:16 · Answer 1 · 2013-09-24 08:16

Вы можете добавить следующие CSS.

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

Проверьте эту скрипку.. bxslider

25

Источник

user1047988 24 сен '13 в 08:16

user1351277 24 сен '13 в 08:26 2013-09-24 08:26 · Answer 2 · 2013-09-24 08:26

Почему бы не стилизовать элементы? Если вы установите фиксированную высоту для обертки, у вас могут возникнуть проблемы с переливами и позиционированием.

Если вы используете списки:

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

15

Источник

user1351277 24 сен '13 в 08:26

user915636 09 дек '13 в 02:00 2013-12-09 02:00 · Answer 3 · 2013-12-09 02:00

Вам нужно установить все 3 элемента, связанных с высотой отображаемого изображения, которые являются основным контейнером, внутренним контейнером и самими изображениями...

вот так:

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

Я должен отметить, что:
bxSlider использует 100% ширину, чтобы держать материал отзывчивым, поэтому вы можете получить искаженное изображение, принудительно увеличив высоту, и именно поэтому вам нужно подавать изображения ползунка предварительно заданного размера (просто чтобы решить проблему с высотой..)
решение:
использовать медиа-запросы, чтобы установить другую высоту при просмотре на мобильном телефоне (только предложение)

удачи...

user5106918 05 авг '15 в 17:47 2015-08-05 17:47 · Answer 4 · 2015-08-05 17:47

Это сработало для меня, и позволяет сохранить отзывчивость

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

3

Источник

user5106918 05 авг '15 в 17:47

user4688376 19 мар '15 в 05:41 2015-03-19 05:41 · Answer 5 · 2015-03-19 05:41

Я решил центрирование и фиксированный размер с этими линиями

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

}

1

Источник

user4688376 19 мар '15 в 05:41

user5196074 27 авг '15 в 00:44 2015-08-27 00:44 · Answer 6 · 2015-08-27 00:44

Если вы не хотите использовать! Важно просто сделать так

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

0

Источник

user5196074 27 авг '15 в 00:44

user2114028 13 июл '18 в 09:36 2018-07-13 09:36 · Answer 7 · 2018-07-13 09:36

Просто используйте max-height:

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

0

Источник

user2114028 13 июл '18 в 09:36

user2452931 19 фев '14 в 16:13 2014-02-19 16:13 · Answer 8 · 2014-02-19 16:13

Обновить!

http://jsfiddle.net/u62LR/

Просто установите высоту вашего изображения...

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

0

Источник

user2452931 19 фев '14 в 16:13

user1111575 25 сен '13 в 18:06 2013-09-25 18:06 · Answer 9 · 2013-09-25 18:06

Я бы порекомендовал обернуть его div затем регулируя divCSS Я считаю, что Bxslider наследует высоту и ширину.

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

Отсюда вы можете настроить liсоответственно:

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

Надеюсь это поможет.

0

Источник

user1111575 25 сен '13 в 18:06