9

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

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

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

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

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

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

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

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

    от
  • Error: User Rate Limit Exceeded

    от
  • 0

    попробуйте использовать этот фрагмент

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

  • 17

    Вы можете центрировать по горизонтали с этими правилами:

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

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

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

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

  • 5

    Используйте свойство CSS background непосредственно в div

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

    В * .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;
    }
    

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