Come ridimensionare immagini con la regola max-width

Durante la costruzione di un sito web responsive, ovvero un sito che si adatta al dispositivo che utilizziamo per la visualizzazione (pc, iphone, ipad ecc), è indispensabile sapere come ridimensionare le immagini in base allo schermo.
Per ottenere questo scopo, utilizzerò in questo tutorial la regola max-width e una foto ad alta risoluzione.

Vediamo un esempio:

Ho scelto una foto di cui mostro solo una miniatura:

Tramite un programma di fotoritocco, riduco l’immagine ad una larghezza di 300px. Dopo di che posso procedere alla costruzione della mia pagina html.

<p>Testo…</p>
<div>
<img alt=”colosseo” src=”img-colosseo.jpg” >
<p>Testo sotto l’immagine</p>
</div>

Inserisco le regole css: una classe per il paragrafo (p.text), una per l’immagine (img.responsive) e una per il contenitore dell’immagine (div.img-wrapper)

Il codice html diventerà:

<p class=”text”>Testo…</p>
<div class=”img-wrapper”>
<img alt=”colosseo” src=”img-colosseo.jpg” class=”responsive” >
<p class=”text”>Testo sotto l’immagine</p>
</div>

La mia pagina avrà il paragrafo a sinistra, a cui darò una larghezza del 60%, e l’immagine a destra, a cui darò la larghezza restante del 40 %… le regole css saranno:

p.text { float: left; width: 60%; }
div.img-wrapper { float: rigth; width: 40%; }

Con queste regole abbiamo creato un layout fluido, ma la nostra immagine non è ancora responsive perchè ha una larghezza statica di 300px. Aggiungiamo quindi la seguente regola:

img.responsive { max-width: 100%; heigth: auto; }

Questo fa si che la nostra immagine si possa ridimensionare in base alla finestra del nostro browser.

DEMO [purchase_link id=”4790″ style=”button” color=”blue” text=”Scarica la DEMO”]