Come avere un sito con immagini responsive (css)

La desiderata del giorno è molto semplice: avere un sito con immagini responsive.
Sto parlando di avere quindi una pagina web dove le immagini caricate, siano in grado di adattarsi automaticamente alla pagina, anche in caso lo schermo abbia una risoluzione minore del dovuto (è il caso del mobile, smartphone cellulare o tablet).
Se usassimo l'html classico infatti, con il famoso tag <img> e i rispettivi width e height in pixel, potremmo avere delle immagini con delle dimensioni poco piacevoli in caso lo schermo sia più stretto del necessario.

In questo breve tutorial quindi, spiegherò che attributi css utilizzare per avere un sito responsive, o per meglio dire, con immagini responsive.
Questa comunque è solo una delle possibili strade, la più rapida ed immediata, ma ce ne sono anche diverse altre più complete e specifiche, che vedremo più avanti.

Come avere un sito con immagini responsive con i css

Il metodo più semplice per poter avere un sito web con immagini responsive con i css è quello di utilizzare il seguente foglio di stile:

img
{
    display: block;
    max-width: 100%;
    height: auto;
}

Andando infatti a lavorare direttamente sull'attributo css img, tutte le immagini presenti sulla pagina o sul sito, verranno ridimensionate in automatico in base alle dimensioni della pagina.
Nello specifico esempio usiamo la proprietà display block, il max-width 100% ed un bel height auto per far regolare automaticamente l'altezza dell'immagine in base alle dimensioni della larghezza.

Ora, se mettiamo l'immagine dentro un div, questa si regolerà automaticamente in base alle dimensioni del suo contenitore, altrimenti, anche se utilizzeremo un'immagine più grande del dovuto, questa dovrebbe ridimensionarsi in automatico anche se restringiamo lo schermo.

Se poi non si vuole applicare questo effetto di adattamento proporzionale allo schermo a tutte le immagini del sito, è possibile applicare quelle 3 proprietà css, anche solo a specifiche immagini, magari creando un'apposita classe nei fogli di stile da poter riutilizzare quando si vuole.

Se invece non si utilizza questo metodo e si mette su un sito internet una foto più grande della risoluzione dello schermo del visitatore, il risultato finale sarà quello di far apparire sul browser del navigatore una bella barra di scorrimento orizzontale, dato che l'immagine usata potrebbe infatti uscire dallo schermo.

Direi che con l'argomento immagini responsive per oggi è tutto, ma come scritto ad inizio post, l'argomento è bello lungo e complesso, e sicuramente ci ritornerò presto sopra.