Machen Sie Logo Bild responsive mit Bootstrap

Question

Ich benutze Bootstrap für eine Website-Header. Wenn ich das Logo der Website ansprechen möchte, sollte ich zwei Logo-Bilder haben (eines für den Desktop und eines für das Handy) oder sollte ich mein Image-Logo verkleinern? Was ist der beste Weg, um es zu bekommen? Vielen Dank. Das ist mein Code:

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"></div> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
      <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="~/Content/images/logo.png" /></a> 
    </div> 

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a href="/">Home</a></li> 
      <li><a href="~/About/Index">About</a></li> 
      <li><a href="~/Contact/Index">Contacts</a></li> 
     </ul> 
    </div> 

</nav> 

Answer 1

Ich denke nicht, dass es eine einzige Antwort auf diese Frage gibt, aber ich werde versuchen, etwas Licht auf Ihre Möglichkeiten zu werfen.

Mit Bootstrap können Sie die Klasse .img-responsive zum Bild hinzufügen, um es mit der Seitenbreite zu verkleinern. Nach Bootstrap's documentation:

Bilder in Bootstrap 3 kann über die Zugabe der .img-responsive Klasse reaktionsfreundlich gemacht werden. Dies gilt für das Bild max-width: 100%;, height: auto; und display: block;, so dass es gut zum übergeordneten Element skaliert.

Jetzt gehe ich einen Schritt weiter - mit zwei verschiedenen Bildern. Dies ist weniger für Desktop vs. Mobile als für die Bildschirmauflösung. Retina-Bildschirme zeigen beispielsweise Bilder mit einer höheren Auflösung an. Viele Menschen liefern zwei verschiedene Bilder, eines mit normaler Auflösung und eines für die Retina-Bildschirme.

This tutorial Highlights einige Methoden für Ihre Bilder für Retina-Bildschirme vorbereitet, darunter ein Quellbild bereitstellt, die dann verkleinert wird, oder mit Hilfe von CSS Media Queries die src des Bildes zu ändern. Ich werde auch hinzufügen, dass die Verwendung von CSS Media Queries zum Ändern der src des Bildes nicht unbedingt bedeutet, dass der Benutzer zwei Versionen des gleichen Bildes herunterladen müssen.

Answer 2

die Klasse hinzufügen

img-responsive 

auf Ihr Bild

Hinzufügen von zwei Bildern sollte besser sein. Aber viele Browser erkennen nicht, dass Ihr kleineres Bild für responsive ist (hoffentlich wird sich das bald ändern). Also müssen sie 2 Bilder laden. Welches ist schwerer (und langsamer) zu laden.

Für jetzt ist es noch besser, nur die Klasse zu Ihrem Bild hinzuzufügen.

Answer 3

Im Bootstrap gibt es eine Klasse, um Bilder reaktionsfähig zu machen.

Die Klasse ist img-responsive

Fügen Sie diese auf Ihrem img-Tag und das Bild ansprechbar sein wird.

Answer 4

Die Responsive-Bildklasse des Bootstrap legt die maximale Breite auf 100% fest. Dies beschränkt seine Größe, aber erzwingt keine Ausdehnung, um Elternelemente zu füllen, die größer als das Bild selbst sind. Sie müssten das Attribut width verwenden, um das Upscaling zu erzwingen.

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

dank Isherwood DEMO

<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" class="img-responsive" alt="Responsive image"> 

Answer 5

Wo Sie das Bild jetzt haben, mit height: 100% und width: auto, sollte es auf die Größe des navbar halten. Die Navigationsleiste ist standardmäßig 50 Pixel groß für jedes Gerät, das Sie haben.

Answer 6

Überschreiben Sie diese Klassen

.navbar-brand { 
    padding: 0px; 
} 
.navbar-brand>img { 
    height: 100%; 
    padding: 15px; 
    width: auto; 
}