Immagini ridimensionabili con i CSS

Sono un grande sostenitore dei layouts che funzionano se un utente aumenta la grandezza del testo attraverso il proprio browser. Tuttavia, mi chiedevo cosa potrebbe succedere se tutte le immagini si espandessero, a seconda dell' ingrandimento o meno del testo, piuttosto che rimanere della stessa dimensione. Il tutto sembrerebbe più proporzionato?

Prima di vedere un esempio di quanto appena accennato, ho pensato di poter pensare ad una soluzione. Se siete impazienti... eccovi serviti.

Per quanto riguarda la prima immagine, non ho voluto ridimensionarla in quanto ci sarebbero potuti essere problemi di "pixellation". La mia soluzione preferita è quella di piazzare una immagine di grandi dimensioni, nascondere parte di essa e mostrare la parte nascosta man mano che si aumenta la grandezza del testo dalle impostazioni del browser.

Per fare questo ho usato una immagine grande piazzandola in un div al quale sono state assegnate dimensioni relative in em.

Mentre la grandezza del testo aumenta, alla stessa maniera aumentano le dimensioni del div, mostrando parte dell'immagine nascosta. La sfida è quella di far vedere l'immagine, o nascondere parte di essa, man mano che le dimensioni del testo aumentassero o diminuissero.

Il primo metodo usa una immagine di background. Lo svantaggio principale (oltre al fatto che l'immagine è al difuori del contenuto della pagina) è che non sarebbe possibile mantenerla al centro del div.

Così, mentre il div aumenta di dimensione, l'immagine non rimane più centrata al suo interno.

Di seguito il codice HTML:

<div class="resize"></div>

E il CSS è:

.resize { 
background: url(image.jpg) -130px -140px no-repeat; 
border: 3px double #fff; 
float: left; 
height: 12em; 
margin: .2em 1em 1em 0; 
width: 12em; 
} 

Il secondo metodo - la mia soluzione preferita - pone l'immagine nel div, attraverso il tag <img>, nell'HTML. Questo permette di rimanere centrata all'interno del div (grazie a Jonathan Snook per l'assistenza con il CSS).

Di seguito il codice HTML:

<div class="resize2"><img src="/image.jpg" alt="" /></div>

E il CSS è:

.resize2 {
border: 3px double #333;
float: left;
height: 12em; 
margin: .2em 1em 1em 0; 
overflow: hidden; 
width: 12em;
} 
.resize2 img {
margin: -220px 0 0 -210px;
padding: 6em 0 0 6em;
} 

In questo modo si è ottenuto quanto appena descritto. Non so quanto buona possa essere questa tecnica, ma quello che conta è che funziona.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati