Creare immagini responsive

  • 0

Creare immagini responsive

Category : Tutorial

Ora che il layout del nostro sito è pronto dobbiamo inserire le immagini per renderlo accattivante e funzionale. La cosa importante, considerando che il sito si adatterà a diversi dispositivi è creare immagini responsive, cioè immagini che si adattano al contenuto senza sgranare ma soprattutto mantenendo qualitativo il risultato visivo.

Farlo è semplicissimo, basta creare una classe css tra i tag <style></style> da associare all’immagine i casi sono due:

.img-responsive{
   width:100%;
   /*L'immagine si adatterà ma potrebbe sgranare */
}

oppure

.img-responsive{
   max-width:100%;
   /* L'immagine tenderà ad assumere o la pripria dimensione oppure,
      se inferiore la larghezza dello schermo */
}

In questo secondo caso bisogna però aggiungere un controllo per evitare che su browser più vecchiotti che non supportano il tag max-width l’immagine si adatti e per farlo utilizziamo:

<!--[if IE 6]>
  <style type="text/css">
    .flex {width: 100%}
  </style>
<![endif]-->

Adesso non ci resta che inserire le immagini dove ci piace utilizzando il codice

<img src=”indirizzo-immagine” class=”img-responsive”>

Per tenere tutto in ordine vi consiglio di creare una cartella images in cui conservare tutte le immagini che inserirete nel vostro sito!

Ora sapete come creare immagini responsive… ma a cosa servono le immagini senza testo? I basso vi lascio due link… uno con l’esempio ad una pagina responsiva contenenti testi e immagini e un vademecum delle informazioni principali da conoscere per scrivere i contenuti di una pagina web

Esempio 4
Vademecum HTML


Acquista il mio ebook

Contattaci su Facebook