Controllare la larghezza massima delle immagini in WordPress
A volte capita di inserire un’immagine in un articolo che occupa più spazio di quello che dovrebbe occupare.
Questo ne è un esempio:
Con una semplice regola nel foglio di stile (CSS) è semplice controllare la largezza massima che possono avere le immagini inserite nel contenuto degli articoli.
Basta identificare la classe o l’ID delle immagini utilizzando Firebug (con Firefox) oppure il Webkit inspector (con Chrome o Safari)
Nel caso di una installazione di un sito realizzato con WordPress molto probabilmente il selettore CSS sarà
.size-full{}
Un volta identificato il selettore corretto basta aggiungere queste regole:
height: auto;
max-width: 640px;
width: auto;
Il risultato finale è questo:
.size-full{
height: auto;
max-width: 640px;
width: auto;
}
L’altezza dell’immagine viene ridimensionata proporzionalmente alla larghezza che viene a sua volta scalata alla larghezza massima indicata dalla regola max-width
Questa semplice regola fa in modo che l’immagini si adatti da sola alla larghezza massima impostata dal webmaster.
Il risultato finale è questo:
Ma c’è una controindicazione. L’immagine viene visualizzata con largehzza ridotta e non altera il layout della pagina ma il file visualizzato ha comunque le dimensioni del file originale.
Per capirci se incorporo nel testo una file da 2048px di larghezza, questa regola fa in modo che il file venga visualizzato ridimensionato ma viene comunque utilizzato il file di grandi dimensioni.
Quindi è preferibile adottare questa tecnica quando le immagini vengono gestite da chi sa cosa sta facendo. Altrimenti si rischia di avere pagine visualiizate corretamente ma di dimensioni di download spropositate!
Consiglio: per evitare questa situazione, c’è un utile plugin che limita la dimensione massima delle immagini caricate, ridimensionando quelle che troppo grandi. Il plugin è estremamente utile per controllare autori poco attenti!
