Bootstrap carousel - как использовать изображение в качестве фона, БОЛЬШЕ, чем карусель?

В эти выходные я избивал себя, чтобы обойти это. У меня есть сайт, на котором используется Bootstrap 3.0 и карусель с фоновыми изображениями, и мне удалось воспроизвести свой вопрос в небольшой скрипке. У меня есть div с максимальной высотой с изображением внутри. Изображение обычно будет больше, чем div (по крайней мере, по высоте). Я использую класс img-responsive из начальной загрузки, чтобы убедиться, что в мобильных браузерах изображение уменьшается. Это причина, по которой я увеличиваю div до максимальной высоты и не устанавливаю для него фиксированную высоту.

У меня такой вопрос: как добиться выравнивания изображения по вертикали по центру? Я пробовал:

  • Добавление классов display: table и display: table-cell, но ячейка таблицы не может иметь максимальную высоту.
  • Выровнять вещи по вертикали, но ничего не получается.
  • Установка отрицательного поля на изображении с помощью javascript, но это делает div меньше, так как div использует изображение для своего размера.
  • Использование фона css вместо встроенного изображения. Это не делает div (самое большее) таким же большим, как изображение, и не позволяет гибко увеличивать / уменьшать размер.

Сценарий: http://jsfiddle.net/SabbeRubbish/dZQ26/4/

<div class="carousel-inner">
  <div id="frame" class="item active">
    <img src="https://www.google.com/images/srpr/logo11w.png" 
         class="img-responsive" />
  </div>
</div>

Может ли кто-нибудь порекомендовать мне хорошие и чистые способы центрировать изображение по вертикали? Или скажите, какого черта я делаю не так? :-) Спасибо.

PS: почему по центру вертикально? Если страница очень широкая, появляется большая область обрезки, так как изображение увеличивается вместе со страницей. Лучше показывать середину картинки, а не верх.


vertical-alignment css responsive-design twitter-bootstrap-3
person SabbeRubbish    schedule 03.03.2014    source источник

Ответы (2)


arrow_upward
2
arrow_downward

это что-то ближе к тому, чего вы пытаетесь достичь?

#frame {
    border: 1px solid grey;
    max-height: 100px;
    min-height: 100px; /* Remove this line */
    padding: 15px 0px; /* Add this line to always have height on the div */
    background-size: cover;
    background-image: url(https://www.google.com/images/srpr/logo11w.png);
    background-position: center center;
}

http://jsfiddle.net/rrEYJ/

РЕДАКТИРОВАТЬ:

Как предлагается в комментариях, вы также можете использовать background-size: contain;, чтобы все изображение было внутри элемента #frame. В этом случае вам, вероятно, также придется использовать background-repeat: no-repeat;.

Проверьте эту скрипку: http://jsfiddle.net/rrEYJ/1/

РЕДАКТИРОВАТЬ2:

Основываясь на вашем комментарии, я провел некоторое исследование, и, по-видимому, свойство background-size также можно установить в процентах. Основываясь на этой новой информации, см. Эту скрипку:

http://jsfiddle.net/rrEYJ/3/

РЕДАКТИРОВАТЬ3:

У css было свойство min-height, поэтому div не менял свою высоту. Проверьте эту скрипку: http://jsfiddle.net/rrEYJ/4/

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

person Ovidiu Iacomi    schedule 03.03.2014
comment
Вы также можете использовать background-size: contain;, если хотите, чтобы все изображение было внутри #frame - person Aurélien Grimpard; 03.03.2014
comment
Спасибо за предложения! Однако :-) Я не хочу, чтобы размер изображения увеличивался до его высоты. Я хочу, чтобы изображение занимало всю ширину. Карусель будет выглядеть некрасиво (с дополнительными границами по бокам), если изображение отображается полностью. См. Обновленную скрипку (красный - это плохо): jsfiddle.net/SabbeRubbish/rrEYJ/2 - person SabbeRubbish; 03.03.2014
comment
Спасибо! Это делает изображение центром в div. Большой! Но теперь при сжатии страницы div больше не сжимается, открывая красную зону ... :-) - person SabbeRubbish; 03.03.2014
comment
Это делает высоту div проблематичной. :-) Теперь высота равна размеру абзаца + отступ 15 пикселей, а не 100 пикселей. Div всегда должен быть 100 пикселей, вплоть до того момента, когда высота изображения становится меньше 100 пикселей, а затем его необходимо уменьшить. Кстати, именно поэтому я отказался от трека с фоновыми изображениями. - person SabbeRubbish; 03.03.2014
comment
Я думаю, что это более вертикальная реакция, которая может быть достигнута только с помощью javascript. Высота элементов в адаптивном дизайне должна быть либо автоматической, либо максимальной, чтобы соответствовать содержимому. Это далеко не простые адаптивные вещи. - person Ovidiu Iacomi; 03.03.2014
comment
Хорошо, спасибо за ваши ответы. Мне нужно будет найти другой способ делать что-то. Не поклонник Javascript, так как он может вызвать мерцание при перемещении элементов, но я посмотрю, где я доберусь. - person SabbeRubbish; 03.03.2014

arrow_upward
0
arrow_downward

Добавить стиль для такого изображения

#frame img {
width:auto;
max-height:100px; }
person nikesh    schedule 03.03.2014
comment
Спасибо за предложения! Однако :-) Я не хочу, чтобы размер изображения увеличивался до его высоты. Я хочу, чтобы изображение занимало всю ширину. Карусель будет выглядеть некрасиво (с дополнительными границами по бокам), если изображение отображается полностью. См. Обновленную скрипку (красный - это плохо): jsfiddle.net/SabbeRubbish/dZQ26/6 - person SabbeRubbish; 03.03.2014
comment
мы можем задать ширину изображения 100% и высоту автоматически, но для #frame вы добавили максимальную высоту 100 пикселей, и это создает проблему - person nikesh; 03.03.2014
comment
Мне нужно, чтобы высота была ограничена ... Если нет max-height, div становится больше. Я не хочу этого. Я хочу, чтобы изображение было полной ширины, автоматической высоты, но с окном просмотра не больше, чем div. - person SabbeRubbish; 03.03.2014