Класс Bootstrap 3 «img-responsive» не так отзывчив

Обновление: вот последняя версия jsFiddle.

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

Как видите, у меня есть логотип размером 400 x 200, который я попытался сделать адаптивным (через класс .img-responsive), однако он продолжает оставаться того же размера (400 x 200) и не изменяет размер + вложение красиво в мою панель навигации заголовка.

В идеале изображение должно изменять размер и помещаться внутри панели навигации прямо в соответствии с пунктами меню (MUCH AMAZE, SUCH WOW и т. д.).

У меня есть чувство, что это как-то связано с этой частью:

<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="/"><img src="http://placehold.it/400x200" class="img-responsive" height="220" /></a>
</div>

Я не совсем понимаю, что делает этот "Переключить навигацию" <button/> (тот, что стоит прямо перед моим логотипом <img/>). По общему признанию, я занимаюсь культивированием грузов и только что получил общий код Bootstrap 3 с их сайта с примерами. Я применяю неправильные правила стиля? Нужно ли мне помещать <img/> в форму или div или какой-либо другой тип контейнера здесь? Где я ошибаюсь?


html css responsive-design twitter-bootstrap image-resizing
person smeeb    schedule 21.11.2015    source источник
comment
Изображение отзывчивое. Если вы хотите разместить изображение внутри .navbar-brand, вы можете удалить высоту из .navbar-brand(height:auto).   -  person Alex    schedule 21.11.2015
comment
Спасибо @alirezasafian (+1) - посмотрите мой обновленный jsFiddle. Теперь изображение появляется внутри панели навигации, но его размер не изменяется, чтобы хорошо вписаться в нее. Идеи?   -  person smeeb    schedule 22.11.2015

Ответы (1)


arrow_upward
2
arrow_downward

добавьте это может вам помочь

.img-responsive
{
width:100%;
}
person Anubhav pun    schedule 21.11.2015
comment
Спасибо @Anubhav (+1) - как мне добавить это правило в тег <img/>? - person smeeb; 21.11.2015
comment
либо вы используете встроенный как ‹img style=width:100%›, либо внешнюю таблицу стилей начальной загрузки, добавив .img-responsive{ width:100%;} - person Anubhav pun; 21.11.2015