Логотип Bootstrap не реагирует

Question

Если я уменьшу размер экрана, логотип будет либо очень маленьким, либо работать на мобильных телефонах, либо очень большой, а работать на настольных компьютерах и смотреть BLURRY. Как я могу заставить логотип свободно говорить на всех размерах экрана, включая планшеты? Размер логотипа составляет 793 x 150 пикселей, это широкий логотип. Этот размер только что загружен на сервер, конечно, он намного меньше на фактическом сайте, чтобы он вписывался в навигационную панель.

Логотип добавлен в HTML как это:

<a class=navbar-brand href=http://example.com/><img src="http://example.com/resources/imgs/logo.png" alt="Example"></a>

CSS:

header .navbar-brand { 
 
    padding-top: 7px; 
 
    padding-bottom: 7px 
 
} 
 
header .navbar-brand>img { 
 
    height: 46px 
 
} 
 
header .navbar-brand>img { 
 
     height: auto; 
 
     width: 135px 
 
}

Answer 1

Добавьте класс img-responsive в тег img. При необходимости установите определенную ширину для привязки тега.

<a class=navbar-brand href=http://example.com/><img src="http://example.com/resources/imgs/logo.png" alt="Example" class="img-responsive"></a> 

CSS:

.navbar-brand { 
    max-width: 60px; 
} 

Класс img-responsive относится max-width: 100%;, height: auto; and display: block; к изображению, так что весы хорошо к родительскому элементу.

Подробнее об этом здесь:

http://getbootstrap.com/css/#images-responsive

Глядя на вашем сайте сделать следующие изменения:

удаление кодов из

custom.css линии 699

header .navbar-brand > img { 
    height: 200px; 
} 

style.css 5105

.navbar-brand > img { 
    display: block; 
} 

Используйте это:

style.css 2091

.navbar-brand { 
    float: left; 
    padding: 12px 15px; 
    font-size: 19px; 
    line-height: 21px; 
    height: 62px; 
    max-width: 200px; 
    display: table; 
} 

Редактирование HTML:

<a class="navbar-brand" href="http://soldmymac.com/"><span><img src="http://soldmymac.com/resources/imgs/logo.png" alt="Sold My Mac" class="img-responsive"></span></a> 

И добавить CSS:

.navbar-brand span { 
    display: table-cell; 
    vertical-align: middle; // This will keep the logo vertically in the middle 
} 

И последнее: ....

УЧИТЬСЯ CSS, ЕСЛИ ВЫ СМОТРИТЕ ВРЕМЯ. ЭТО ПРОСТО.