Bootstrap: Navbar Logo Größe

Question

Ich habe ein 1700x700 Logo und meine Navbar Höhe ist 70. Ich möchte die Größe automatisch anpassen und an meine Navbar Höhe anpassen. Ich könnte es mit Photoshop auf 170 x 70 Größe ändern, aber das Problem ist, dass das Bild an Qualität verliert, wenn ich zoome.

Ich versuchte mit img-responsive, aber es funktioniert nicht.

Vielen Dank!

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



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

Answer 1

können Sie folgende CSS-Set für dieses

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

Answer 2

Haben Sie die unten, die Sie keine externen CSS geben müssen.

mit der Klasse = "img-responsive" auf dem Bild.

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

Answer 3

Geben Sie Ihrem Logo max-height und machen den Wert der Höhe des navbar wie so ...

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

Answer 4

Sie können diese CSS verwenden

Hintergrund: URL (../ images/logo.png) no-repeat Bildlauf Mitte/enthalten;

Answer 5

Die beste Option ist die Größenanpassung des Logos in Photoshop (oder ähnlich).

Natürlich, wenn es in weniger Pixel angezeigt wird, verliert es die Auflösung, aber wenn Sie ein großes Logo laden und dann die Größe über CSS ändern, wird der Effekt gleich sein und Ihre Seite wird mehr Zeit zum Laden brauchen.

Answer 6

Vereinbaren Sie mit ABK so weit wie Max-Höhe CSS, aber ich denke, JGonDev auf die Größe des Bildes ist die richtige Richtung für einen Leistungsstandpunkt. Sie sollten CSS nur verwenden, um Ihre Website zu gestalten und zu gestalten. Es sollte nicht verwendet werden, um Ihren Code zu hacken, um das benötigte Verlangen zu erzwingen.

Was die Größenänderung betrifft, haben die meisten neuen Entwickler keinen Zugang zu großartigen Design-Tools wie Photoshop, aber großartig, wenn Sie können! Für Mac-Benutzer ermöglicht Preview die Bearbeitung von Bildern.

Öffnen Sie Ihr Bild in der Vorschau - Gehen Sie zu Extras/AdjustSize:

Dann können Sie Ihre Breite oder Höhe auf die gewünschte Größe ändern. Stellen Sie sicher, dass Scale proportional überprüft wird! Dadurch wird sichergestellt, dass das Bild nicht verzerrt wird.

Nachdem Sie die Größe geändert haben, klicken Sie auf "OK". Datei speichern

** Hinweis - Stellen Sie sicher, dass Sie Ihre Datei als eine andere Datei speichern, z. B. navbar-logo.png oder etwas Ähnliches, damit Sie sich leicht merken können, wofür das Bild in Ihrem Code verwendet werden soll.

Wenn Sie die Größe Ihres Bildes ändern, wird die Aufblähung und Größe Ihrer gesamten Website reduziert und die Gesamtleistung Ihrer Website verbessert.