Rendi reattivo l'immagine del logo utilizzando Bootstrap

Question

Sto utilizzando il bootstrap per un'intestazione del sito. Se desidero rendere reattivo il logo del sito web, dovrei avere due immagini logo (una per desktop e una per cellulare) o dovrei ridimensionare il mio logo immagine? qual è il modo migliore per ottenerlo? Grazie. Questo è il mio codice:

<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

Non credo che ci sia una sola risposta a questa domanda, ma proverò a far luce sulle opzioni.

Con Bootstrap, è possibile aggiungere la classe .img-responsive all'immagine per ridimensionarla con la larghezza della pagina. Secondo Bootstrap's documentation:

Immagini in Bootstrap 3 possono essere fatti reattivo-friendly tramite l'aggiunta della classe .img-responsive. Questo vale per max-width: 100%;, height: auto; e display: block; per l'immagine in modo che risulti gradatamente all'elemento padre.

Ora farò un ulteriore passo avanti con due immagini diverse. Questo non è tanto per Desktop vs Mobile in quanto è la risoluzione dello schermo. Schermi Retina visualizzeranno le immagini ad una risoluzione più alta, per esempio. Molte persone forniscono due immagini diverse, una a risoluzione normale e una doppia per schermi retina.

This tutorial evidenzia alcuni metodi per la preparazione delle immagini per gli schermi Retina, inclusa la fornitura di un'immagine di origine che viene quindi ridimensionata o utilizzata da Query multimediale CSS per modificare src dell'immagine. Aggiungerò anche che l'uso di CSS Media Queries per modificare lo src dell'immagine non significa necessariamente che l'utente dovrà scaricare due versioni della stessa immagine.

Answer 2

aggiungere la classe

img-responsive 

alla vostra immagine

Aggiunta di due immagini dovrebbe essere migliore. Ma molti browser non riconoscono che la tua immagine più piccola è reattiva (spero che questo cambi presto). Quindi dovranno caricare 2 immagini. Che è più pesante (e più lento) da caricare.

Per ora è ancora meglio aggiungere semplicemente la classe all'immagine.

Answer 3

In bootstrap c'è una classe per rendere le immagini reattive.

La classe è img-responsive

Aggiungi questo al vostro tag img e l'immagine diventerà reattivo.

Answer 4

La classe di immagine reattiva di Bootstrap imposta la larghezza massima su 100%. Questo limita le sue dimensioni, ma non lo costringe a stirarsi per riempire elementi genitore più grandi dell'immagine stessa. Dovresti usare l'attributo width per forzare l'upscaling.

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

grazie a Isherwood DEMO

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

Answer 5

Dove avete l'immagine ora, utilizzando l'altezza: 100% e larghezza: auto, dovrebbero tenerlo per la dimensione della barra di navigazione. La barra di navigazione è alta 50px per impostazione predefinita per qualsiasi dispositivo tu abbia.

Answer 6

ignorare questa classi

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