Nella scorsa lezione abbiamo già visto che le “celle” delle colonne del layout (creato con l’ausilio della "griglia" di Bootstrap) sono completamente responsive, ossia si adattano alle dimensioni del display del dispositivo in cui vengono visualizzate. Naturalmente se le celle contengono testo questo non è un problema: il testo si adatta facilmente alle diverse dimensioni del contenitore che lo ospita e lo abbiamo visto bene negli esempi proposti nella scorsa lezione.
Altrettanto, purtroppo, non si può dire delle immagini. Facciamo un esempio continuando con il layout realizzato nella scorsa lezione, ma sostituiamo il testo della seconda colonna della prima riga con una immagine di larghezza pari a 500 px.
<div class="container">
<div class="row">
<div class="col-md-4"><h1>Colonna 1</h1>"Lorem ipsum dolor sit amet, ..."</div>
<div class="col-md-4"><h1>Colonna 2</h1><img width="500" src="lunaPiccola.JPG"></div>
<div class="col-md-4"><h1>Colonna 3</h1>"Lorem ipsum dolor sit amet, ..."</div>
</div>
<div class="row">
<div class="col-md-4"><h1>Colonna 1</h1>"Lorem ipsum dolor sit amet, ..."</div>
<div class="col-md-8"><h1>Colonna 2</h1>"Lorem ipsum dolor sit amet, …"</div>
</div>
</div> 
Essendo l’’immagine è più grande dello spazio che le viene assegnato (la larghezza della colonna che la contiene) e dunque va ad occupare anche parte della colonna alla sua sinistra creando un effetto visivamente sgradevole, evidente sintomo di un web-design poco attento e professionale. Se ridimensionate la finestra del browser o visualizzate la pagina su un dispositivo mobile, anche se la colonna che la contiene si sposta regolarmente per impilarsi fra le altre, l’immagine non si ridimensiona, ma esce della finestra sulla destra creando, ancora una volta, errori grossolani.
Naturalmente esiste una soluzione veramente semplice a questo problema… ma prima di mostrarvi la soluzione era giusto presentarvoi il problema 🙂
Per rendere l’immagine responsiva; infatti, è sufficiente assegnare all’immagine stessa la classe img-responsive: questa classe assegna all’immagine le proprietà CSS max-width: 100%; e height: auto; in modo che l’immagine si ridimensioni automaticamente in base all’elemento genitore senza mai varcarne i confini.
Modificando come segue il markup dell’immagine:
<img width="500" src="lunaPiccola.JPG" class="img-responsive">otterremo un risultato visivo perfetto:
Se proviamo a visualizzare la pagina su uno smartphone, vedremo che anche in questa situazione l’immagine si comporta bene facendo esattamente ciò che ci aspettivamo da lei: ovvero si sposta e si ridimensiona segendo il flusso del nostro layout responsivo senza creare gli inestetismi illustrati nella prima parte di questa lezione.
Ricordiamoci quindi di aggiungere sempre la classe ".img-responsive" a tutte le immagini che andremo ad inserire nel nostro layout realizzato con Bootstrap, in caso contrario possiamo utilizzare un piccolo trucchetto per applicare dinamicamente questa classe a tutte le immagini presenti nella nostra griglia. Per farlo sarà sufficiente utilizzare questo semplice snippet jQuery:
$(function() {
$('img').addClass('img-responsive');
});