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”]
[amazon_link asins=’8871926498,8871929950,8804540389,8897674585′ template=’ProductCarousel’ store=’lab07-21′ marketplace=’IT’ link_id=’2e35f13d-c391-11e6-8215-0f9e59749100′]
Articoli correlati
Logo (abbreviazione di logotipo; plurale...
Se stai cercando di imparare ad usare P...
3 TUTORIAL PER ILLUSTRATOR Quanti tutori...
3Dconnexion offre l'ultima generazione ...
Grazie mille per l’articolo, mi ha ispirato tanto.