Guida di CSS
Come fare per ..
Ridimensionare una immagine
Supponiamo di avere una immagine, o una serie di immagini, di cui non sappiamo la dimensione originaria e che vogliamo inserire in uno spazio di (ad esempio) 200 pixel.
La soluzione ideale sarebbe quella di ridimensionare manualmente le immagini mediante un programma di grafica ed utilizzare quella, ma potremmo non avere questa possibilità.
Tramite il CSS possiamo impostare la larghezza, width, ad un valore fisso e l'altezza adattata in automatico, oppure l'altezza, height, fissa e la larghezza adattata.
Non serve altro che definire le nostre proprietà in una classe ed assegnare la classe all'immagine.
Vediamo il nostro codice.
[CSS] .imgw200 { width: 200px; height: auto; } .imgh200 { width: auto; height: 200px; } |
[HTML] Foto 1 <img src="foto.jpg" class="imgw200"> Foto 2 <img src="foto.jpg" class="imgh200"> |
E questo sotto è l'effetto ottenuto, utilizzando una immagine da 320x240 pixel.
Foto 1  Foto 2 |
Sempre tramite il CSS, avendo a disposizione monitor grandi ma volendo visualizzare la nostra pagina anche su schermi piccoli, come ad esempio su uno smartphone, possiamo dare alla immagine la dimensione massima, in percentuale rispetto alla dimensione dello spazio che abbiamo a disposizione.
Invece dell'attributo width, andremo ad utilizzare l'attributo max-width, in modo da definire la dimensione massima dell'immagine all'interno del riquadro in cui è inserita.
Se l'immagine ha larghezza inferiore al valore impostato al max-width l'immagine non viene ingrandita, ma viene visualizzata alla sua dimensione originaria.
Vediamo il codice.
[CSS] .img-fluid50 { max-width: 50%; height: auto; } |
[HTML] Foto 3 <img src="foto.jpg" class="img-fluid50"> |
E questo sotto è l'effetto ottenuto, utilizzando una immagine da 320x240 pixel, in riquadri di diverse dimensioni.
|
|
|