Проблемы с помощью $ .getJSON

ЗАВЕРШИТЕ ДЕМО С МНОГИМИ ПРИМЕРАМИ

ВАЖНОЕ ОБНОВЛЕНИЕ: 21.12.15

В настоящее время в Mozilla есть ошибка , которую я обнаружил , которая разбивает навигационную панель при определенной ширине браузера с помощью МНОГО ДЕМО НА ЭТОЙ СТРАНИЦЕ . По сути, ошибка Mozilla включает в себя левый и правый отступы на ссылку бренда Navbar как часть ширины изображения. Тем не менее, это можно легко исправить, и я проверил это, и я уверен, что это самый стабильный рабочий пример на этой странице. Он автоматически изменит размер и работает во всех браузерах.

Просто добавьте это в свой css и используйте марку navbar так же, как и .img-responsive. Ваш логотип будет автоматически соответствовать

.navbar-brand {
  padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
  height: 100%;
  padding: 15px; /* firefox bug fix */
  width: auto;
}

Другой вариант - использовать фоновое изображение. Используйте изображение любого размера, а затем просто установите желаемую ширину:

.navbar-brand {
  background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
  width: 200px;
}

ОРИГИНАЛЬНЫЙ ОТВЕТ НИЖЕ (только для справки)

Люди, кажется, много забывают о подгонке объектов. Лично я считаю, что с ним проще всего работать, потому что изображение автоматически подстраивается под размер меню. Если вы просто используете подгонку объекта к изображению, он автоматически изменит размеры до высоты меню.

    .navbar-brand > img {
      max-height: 100%;
      height: 100%;
      -o-object-fit: contain;
      object-fit: contain;
    }

Было отмечено, что это не работает в IE "пока". Существует polyfill , но это может быть чрезмерно, если вы не планируете использовать его для чего-либо еще. Похоже, подгонка объекта планируется , планируется для будущего выпуска IE, поэтому, как только это произойдет, это сработает во всех браузерах.

Однако, если вы заметили, что .img-отзывчивый класс в начальной загрузке, максимальная ширина предполагает, что вы помещаете эти изображения в столбцы или что-то, что имеет явное с set. Это будет означать, что 100% означает 100% ширину родительского элемента.

    .img-responsive
        max-width: 100%;
        height: auto;
    }

Причина, по которой мы не можем использовать это с панелью навигации, заключается в том, что родительский элемент (.navbar-brand) имеет фиксированную высоту 50 пикселей, но ширина не установлена.

Если мы возьмем эту логику и перевернем , чтобы она была отзывчивой на основе высоты, мы можем получить адаптивное изображение, которое масштабируется до высоты .navbar-brand, добавляя и автоматически устанавливая ширину. будет приспосабливаться к пропорции.

max-height: 100%;
width: auto;

Обычно нам нужно добавить display:block; к сценарию, но так как у navbar-brand уже есть float: left; Применительно к нему он автоматически действует как блочный элемент.

Вы можете столкнуться с редкой ситуацией, когда ваш логотип слишком маленький. Подход img-отзывчивый не принимает это во внимание, но мы будем. Также добавив атрибут «height» в .navbar-brand > img, вы можете быть уверены, что он будет увеличиваться и уменьшаться.

max-height: 100%;
height: 100%;
width: auto;

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

ДЕМО http://codepen.io/bootstrapped/pen/KwYGwq