Come fare immagini responsive con Bootstrap.

Nonostante il fatto che il framework Bootstrap è responsiv (nel senso che adatta la pagina web  ai cambiamenti della larghezza dello schermo da cui si naviga sul web), su una  pagina realizzata con Bootsrap le immagini da default non sono responsive. Loro non si adeguano automaticamente al cambiamento della larghezza dello schermo come per esempio paragrafi o blochi. Ma questo è facilmente risolvibile.

Principali nozioni su Bootstrap.

  1. Introduzione a Bootstrap
  2. Colegare fail di bootstrap
  3. La sistema a grglia
  4. Offset in Bootstrp. Spazio fra le colonne
  5. Ordine delle colonne
  6. La prima pagina html su Bootstrap
  7. Header con bootstrap
  8. Come realizzare menu responsive con Bootstrap
  9. Formatazione del testo.
  10. Come creare bottoni con Bootstrap
  11. Come rendere immagini responsive con Bootstrap
  12. Carosello bootstrap
  13. Bricioli di pane con Bootstrap
  14. Come realizzare accordeon

Immagini responsive con Bootstrap

Per esempio nel nostro precedente esempio (pagina sito.html dalle  prime lezioni dedicati al tema ) per le nostre immagini dei corsi nelle colonne, ho indicato la loro largezza e altezza per fare in modo che siano ben visibili anche su schermi piccoli. E quindi tutto apposto sia su grandi schermi che su quelli piccoli. A questo punto vediamo di inserire una immagine larga che occupa  tutto lo spazio per largezza della pagina. Io l'ho presa dalla pagina dedicata al corso “Dominio e hosting”
dis9 1
vediamo di inserirla sulla nostra pagina sito.html in alto nella stringa 2
dis9 2
E vediamo di aprire la nostra pagina in un browser.
dis9 3

Sullo schermo grande tutto apposto, ma quando vediamo di imitare uno smartphone diminuendo la larghezza dello schermo
dis9 4
scopriamo che la nostra immagine non si è adattata alla nuova largezza dello schermo come invece il paragrafo sopra.

Come rendere immagini responsive

Nel Bootstrap 3, per fare che una immagine diventa responsiva nel codice html è necessario per il tag “img” per ogni immagine prescrivere la classe “img-responsive”. Nel nostro caso vediamo di agiungere questa classe soltanto alla immagine appena inserita. Il nostro codice sarà simile a questo:

<img class = "img-responsive" src = "img /dominio e hosting.jpg" alt = "">

Ebbene, la nostra immagine si comporterà in modo più appropriato, perché con la diminuzione della larghezza dello schermo, l'immagine viene ridotta per adattarsi alla larghezza della colonna in cui si trova, vediamo :

dis9 5

In linea di principio è strano che questa funzione non è inserita di default, e per annullarla avrebbero potuto aggiungere una classe speciale. Ma gli sviluppatori sanno meglio. Nel Bootstrap ci sono anche altri strumenti legati a  stili CSS che corispondono per  la gestione di immagini, vediamo questi classi speciali:

Modificare l'aspetto d'immagini con Bootstrap

Immagine rotonda

1. È possibile creare da una immagine rettangolare un' immagine rotonda. Non arrotondare semplicemente gli angoli (su questo piu sotto), ma renderli proprio rotondi (e quindi da una immagine quadrata otterremo un cerchio e da una rettangolare – un ovalo). Per esempio, arrotondando solo i angoli sarebbe difficile ottenere l'immagine del autore (la mia in questo caso) come sulla pagina di presentazione del corso css o html. Per questo si utilizza la classe “img-circle”. Si può aggiungere questa classe direttamente subito dopo la classe “img-responsive” (se utilizziamo la nostra immagine di sopra ). Il risultato sara questo:

<img class="img-responsive img-circle" src = "img /dominio e hosting.jpg" alt = "">

dis9 6

Arrotondare gli angoli

2. Altra opzione che posiamo uttilizare sul nostro sito e che posiamo semplicemente arrotondare dei angoli. Questo possiamo fare aggiungendo un altra classe dal arsenale Bootstrap 3, si chiama img-rounded . L'arrotondamento non è più cosi visibile come nel esempio precedente, ma comunque adorabile:
dis9 7

Immagine con cornice

3. E infine, per alcune immagini usate sulla pagina, può essere opportuno aggiungere una cornice. Pottrebbe essere molto utili questa opzione per le  immagini che hanno lo sfondo come colore simile al colore della pagina. Per questo scopo si utilizza la classe img-thumbnail .
dis 9 8

Usare o non usare ultime tre classi decidete per se stessi, ma fare in modo che immagini diventino responsive (agiungere  class="img-responsive"), mi sento di raccomandare di inserire sempre, a meno che avete una buona ragione per non farlo.

 

Letto 2851 volte