Immagini adattive con i CSS. Semplice trucco.

In questo breve tutorial vediamo i modi più semplici per rendere immagini adattivi utilizzando i CSS. Ci sono  diverse soluzioni per rendere l'immagine adattativa, e sono tutti diversi per la loro complessità e il livello di supporto per i browser. Mettiamo da parte i metodi difficili, perche le specifiche moderne ci permettono di rendere le immagini utilizzate sul sito, adaptive e correttamente visualizzati sugli schermi di diversi dispositivi del utente con pocco codice e poche proprietà di CSS .

Nella pagina di demo potrai vedere gli esempi che ho preparato per questa lezione. Esempi di varia natura:  una singola immagine, l'immagini in due o più colonne, nonché un esempio di utilizzo di un'immagine di sfondo di grandi dimensioni con adattabilità garantita. Tutte le realizzazioni sono basate su valori in percentuale per width (larghezza) e valore di auto per la proprietà di altezza d'immagini (height).

img {
  width: 100%;
  height: auto;
}

Valori di base per immagini adattive

Vediamo subito l'esempio di base, quando abbiamo bisogno di rendere una sola immagine utilizzata nel articolo, o in altre unità separate, completamente adattabili.
Ad esempio, abbiamo un contenitore, al quale abbiamo assegnato una larghezza base di  width: 96%; e abbimo anche indicato la larghezza massima max-width: 960px; e in questo blocco, abbiamo bisogno di inserire una immagine che diventi adattiva.

A questo scopo, l'elemento <img> all'interno del contenitore dovremo asegnare la ragezza di 100%, in modo che la sua larghezza è sempre uguale alla larghezza del contenitore, indipendentemente dalle dimensioni dell'area di visualizzazione. Altezza rispettivamente, impostimo in  modalità auto, e come risalutato  l'immagine risultante cambierà proporzionalmente con riduzione dello scremo.

Sintassi html

<div class="container">
  <img src="/image01.jpg" width="960" height="640" />
</div>

Sintassi css

div.container {
  width: 96%;
  max-width: 960px;
  margin: 0 auto; /* centriamo contenitore principale */
}
img {
  width: 100%; /* larghezza d'mmagine  */
  height: auto; /* altezza de'immagine  */
}

Immagini  adattativi nelle colonne

A volte vogliamo vedere le immagini affiancate e posizionati in una riga,  o per esempio sotto forma di una griglia, per l'organizzare  una semplice galleria di immagini .

Per fare questo basta fare piccole modifiche al codice, che abbiamo utilizzato sopra, il primo è quello di ridurre la larghezza della proprietà width  e impostare per l'elemento <img> valore inline-block per le proprietà display , cioè, rendere le nostre immagini non piu elementi block ma elementi inline .

Diamo un'occhiata a due schemi di layout: la dispozizione d' immagini nelle due colonne e la disposizione nelle tre colonne.

1. La disposizione di immagini in due colonne

Per il layout a due colonne di immagini, si può impostare la larghezza a 48%, ovvero circa la metà del contenitore. Non impostare valori in 50%, in modo da avere i margini laterali.

Markup HTML

<div class="container">
  <img src="/image01.jpg" width="960" height="640" />
  <img src="/image02.jpg" width="960" height="640" />
</div>

Stili CSS

img {
  width: 48%;
  display: inline-block;
}

2. Immagini in tre colonne.

Per riposizionare le nostre immagini in tre colonne la tecnica è uguale al esempio precedente. Dobbiamo semplicemente distribuire lo spazio per tre colonne impostando i valori della larghezza dell'immagine di circa un terzo della larghezza del contenitore: 32%.

Markup HTML

<div class="container">
  <img src="/image01.jpg" width="960" height="640" />
  <img src="/image02.jpg" width="960" height="640" />
  <img src="/image03.jpg" width="960" height="640" />
</div>

Stili CSS

img {
  width: 32%;
  display: inline-block;
}

Collocazione condizionale d'immagini adattive

Nel seguente esempio, vediamo le possibilità di utilizzare immagini adattivi con disposizione diversa, a seconda del dispositivo di visualizzazione, cioè, se le immagini vengono visualizzati su un smartphone allora vengono visualizzati in una singola colonna, due colonne sulle tablet, e a  quattro colonne affiancate  su grandi schermi.

Per realizzazione questo, applicheremo  media query @media,  indicando il tipo di dispositivo e rispettiva massima larghezza per  immagine  max-width.

Markup HTML

<div class="container">
  <img src="/image01.jpg" width="960" height="640" />
  <img src="/image02.jpg" width="960" height="640" />
  <img src="/image03.jpg" width="960" height="640" />
  <img src="/image04.jpg" width="960" height="640" />
</div>

Stili CSS

/* per dispositivi piccoli tipo smartphone */
img {
  max-width: 100%;
  display: inline-block;
}
/* Per dispositivi medie tablet */
@media (min-width: 420px) {
  img {
    max-width: 48%;
  }
}
/* per dispositivi con gli scermi grandi PC o pc portatile */
@media (min-width: 760px) {
  img {
    max-width: 24%;
  }
}

E 'piuttosto semplice, non è vero? L'idea di media richieste è eccellente, sono gia utilizzati da tempo ma forse non avevi nemmeno pensato di utilizzarli o non sapevi dove.
Immagine adattiva per tutta la larghezza dello schermo

Al fine di rendere le immagini grandi adattivi, che riempono al 100% le dimensioni della finestra, è sufficiente eliminare la larghezza massima nella proprietà max-width del contenitore ( nel nostro esempio è di 960px ) ed inserire un altro valore impostando la larghezza al 100%. La larghezza dell'immagine, anche essa impostare al 100%.

Stili CSS

.container {
  width: 100%;
}
img {
  width: 100%;
}

Nonostante il fatto che questa tecnica è molto facile da usare e viene supportata al 100% da tutti i browser, va ricordato che l'immagine viene visualizzata sempre in piena, cioè, grandi immagini ad alta risoluzione vengono visualizzate riempendo l'intero spazio, che per piccoli dispositivi mobili non sono sempre desiderato, a meno che l'immagine non è usata come immagine di sfondo.

Letto 621 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso