Вопрос по css, twitter-bootstrap, html – Как расширить карусель изображений Twitter Bootstrap для динамически центрированных изображений

9

Я пытаюсь расширить стандартную карусель изображений Bootstrap для поддержки изображений динамического размера (макс. 500x400), центрированных как по горизонтали, так и по вертикали. Кроме того, я хотел бы сохранить исходный макет заголовка, который привязывает заголовок к нижней части изображения, причем раздел заголовка полностью распространяется по изображению (но не дальше).

Я собрал скрипку, которая является довольно чистой реализацией настройки Bootstrap по умолчанию (в конце секции css есть только 4 дополнительных стиля):

http://jsfiddle.net/rdugan/JFBFU/26/

Я могу довольно легко выполнить требования горизонтального центрирования и подписи, добавив окружающие «inline». div вокруг изображения и подписи и с использованием 'text-align: center' apos; на родителя. Тем не менее, вертикальное центрирование остается проблемой (как всегда.)

В качестве альтернативы я также попытался использовать «display: table-cell» (и сопутствующие стили центрирования) на разных элементах div с разными результатами - в некоторых случаях я нарушаю функциональность карусели, в то время как в других я выполняю центрирование изображения, но теряю привязку к заголовку.

Будем очень благодарны за любые намеки - я уже давно бьюсь об этом.

Ваш Ответ

3   ответа
17

.carousel-inner { text-align: center; }

.carousel .item > img { display: inline-block; }

Для вертикального выравнивания вы должны проверить это: http://www.student.oulu.fi/~laurirai/www/css/middle/

А для сохранения соотношения сторон изображения при изменении размера вам просто нужно изменить только ширину или только высоту изображения, но не одновременно, и оно изменит свое исходное соотношение.

5

содержащем элемент карусели:

В * .html:

<div class="item" style="background-image: url('[path-to-image].png')">
    <!-- omit the <img> tag -->
    <!-- the rest of the stuff that was in the <div> goes here -->
</div>

В * .css:

.carousel .item {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

Однако, это, кажется, ломает навигационные стрелки карусели.

Error: User Rate Limit Exceeded.itemError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
0

.carousel-inner > .item > img {
    min-width: 100%;
}

Похожие вопросы