Как решить проблему в Карусели от Twitter Bootstrap 3.1.1?

Question

[Алим Алибаев]

Здравствуйте люди, делаю проект новостной о hi-tech, верстаю с помощью фреймворка Twitter Bootstrap 3.1.1, взял карусель отсюда.

Проблема в том, что когда ставлю картинки большого размера, то класс .item не держится на месте.

Как сделать так, чтобы .carousel-inner стоял на месте, то есть не менял размеры от изображений?

Comments

[Алим Алибаев]

И при этом адаптивность оставалась так же

[Алим Алибаев]

вот так он сейчас выглядит, а нужно чтобы все картинки были равны с кнопочками.

Answer 1

[Сергей Мельников]

просто задай жестко высоту в px и

.carousel-inner > .item {
  overflow: hidden;
}

либо

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  max-height: 100%;
  margin: auto;
}

Answer 2

[Дмитрий Евграфович]

Задавайте фиксированную высоту для блока картинки, для блоков с подписями четверть от высоты этого блока через less файлы, плюс, под разные разрешения разные размеры, только такой вариант.

Comments

[Алим Алибаев]

Спасибо за ответ конечно, а можно как то по человечески? я вроде как чайник, детальнее можно? то есть пошагово. Спасибо

[Дмитрий Евграфович]

lesscss.ru - почитайте.

качаете исходники бутстрапа, меняете less файлы, добавляя переменные, компилируете. Как вариант делаете все по старинке в custom.css, но в лесс вы в будущем сможете поменять одну цифру и высоты везде пересчитаются по формуле, а в css будете для всех разрешений и всех элементов перебивать все заново каждый раз.

Да, комплиятор мне гуглить лень :) вы можете для начала подключить less.js и bootstrap.less (в нем все остальные файлы подключаются), он все скомпилирует на клиентской стороне, но делать так следует лишь в процессе разработки, потом все это надо скомпилировать, чтобы было красиво, занимало мало место и грузилось одним файлом.

[Сергей Мельников]

@Tantacula зачем людям голову морочишь?))

[Дмитрий Евграфович]

@mlnkv а в чем морока?