Bootstrap: Navbar Logo Размер

Question

У меня есть логотип 1700x700, а высота моего навигатора - 70. Я хотел бы автомасштабировать и адаптировать его к моей высоте навигатора. Я мог бы изменить его размер до 170x70 с помощью Photoshop, но проблема в том, что изображение теряет качество при увеличении.

Я пробовал с img-отзывчивым, но он не работает.

Спасибо!

<a class="navbar-brand" href="index.php"></a> 



.navbar-brand 
{ 
    position: relative; 
    background: url(../images/logo.png); 
    width: 170px; 
    left: 15px; 
} 

Answer 1

Вы можете установить следующий CSS для этого

.navbar-brand { 
    position: relative; 
    background: url(../images/logo.png); 
    width: 170px; 
    left: 15px; 
    background-size: contain; 
} 

Answer 2

ли Вам ниже, который вы не должны давать какие-либо внешние CSS.

используя класс = "img-отзывчив" на изображении.

<a class="navbar-brand" href="#"><img alt="Brand" src="images/logo.png" class="img-responsive" /></a>

Answer 3

Дайте ваш логотип max-height и сделать значение быть высота навигационной панели, как так ...

.navbar-brand 
{ 
    position: relative; 
    background: url(../images/logo.png); 
    width: 170px; 
    left: 15px; 
    max-height: 70px; /* height of the navbar */ 
} 

Answer 4

вы можете использовать этот CSS

фон: url (../ images/logo.png) центр повтора прокрутки без повтора/содержать;

Answer 5

Лучший вариант - изменение размера логотипа в Photoshop (или аналогичном).

Конечно, если он отображается в меньшем количестве пикселей, он теряет разрешение, но если вы загрузите большой логотип, а затем измените его размер с помощью CSS, эффект будет таким же, и на вашу страницу потребуется больше времени для загрузки.

Answer 6

Согласитесь с ABK как с максимальной высотой CSS, но я думаю, что JGonDev при изменении размера изображения является правильным направлением для точки зрения производительности. Вы действительно должны использовать CSS только для стиля и дизайна своего сайта. Его не следует использовать для взлома кода, чтобы вызвать необходимое желание.

Что касается изменения размера, большинство новых разработчиков не имеют доступа к великолепным средствам дизайна, таким как Photoshop, но отлично, если можно! Для пользователей Mac Preview выполняет задание для изменения размеров изображений.

Откройте изображение в окне предварительного просмотра - Перейти к Tools/AdjustSize:

Затем вы можете изменить ширину или высоту до нужного размера. Не забудьте сохранить масштаб пропорционально проверен! Это гарантирует, что изображение не будет искажено.

После изменения размера нажмите кнопку «ОК». Сохранить файл.

** Примечание. Убедитесь, что вы сохранили файл как другой файл, то есть navbar-logo.png или что-то подобное, чтобы вы могли легко запомнить, как изображение должно использоваться в вашем коде.

Изменение размера изображения уменьшит рост и размер вашего общего сайта и улучшит общую производительность вашего сайта.