Un cliente mi ha chiesto di realizzare un sito dove l’immagine di sfondo si deve ridimensionare in base alla finestra del browser. Cercando sul web ho trovato diverse soluzioni basate su flash che a mio avviso sono poco flessibili.
Il progetto prevede un’immagine di sfondo diversa per ogni pagina e la possibilità di cambiarla in maniera abbastanza semplice.
Per questo e per altri motivi mi sono messo al lavoro su una soluzione javascript che risolvesse la cosa. Questo è il modo in cui ho risolto.
Partiamo da un semplice tag immagine:
<img id="imm3" src="sfondo.jpg" alt="" />
l’unico attributo della classe backimage sarà il position absolute per fare uscire l’immagine dal flusso della pagina e lo z-index per esssere sicuri che l’elemento venga mostrato sotto tutti gli altri.
Il nostro javascript verrà attivato ogni volta che viene ridimensionato il browser attraverso il comando:
window.onresize=resize;
Per prima cosa recuperiamo l’immagine. per farlo si usa getElementById dove il nostro id sarà imm3
Ora dobbiamo capire quanto grande è la finestra. Qui purtroppo bisogna tener conto di quale browser stiamo utilizzando. Le proprietà usate per recepire le dimensioni in pixel differiscono leggermente a seconda che si tratti di Internet Explorer o Firefox etc…
Fatto questo potremo andare ad impostare il corretto valore all’immagine attraverso gli attributi standard width e height. Javascript supporta infatti i css
Un problema che si è presentato è l’aspect ratio (larghezza / altezza) della finestra a confronto con quello dell’immagine. Bisogna prevedere una soluzione che adatti l’immagine al meglio a seconda che la finestra del browser sia più alta che larga o viceversa.
Una volta calcolati i due valori dobbiamo confrontarli e calcolare la dimensione dell’immagine che dobbiamo mostrare partendo dall’altezza o dalla larghezza.
L’esempio descritto potete vederlo a qui:
Download
Mentre qui potete scaricarlo in formato zip:
Webquadro Javascript Background Resize (176)Hai soluzioni diverse da proporre?
Ecco una lista di altre risorse che potrebbero interessarti:
Condividi
Se hai trovato interessante questo post, condividilo con i tuoi amici tramite i social network:
Mmmhhh…. davvero interessante! Poi mi piacciono molto i post come questo dove si parla di qualcosa di interessante e lo si mostra pure con la pagina di esempio: anche a me piace fare post simili a questo.
Cmq lo script che passi può essere davvero utile in diverse situazioni! Grazie!
Di recente ho lavorato a un sito dove la richiesta era la medesima: sfondo adattabile alla finestra del browser.
L’immagine veniva adattata al resize e al document.ready (evento fornito da jQuery), cioè quando tutta la pagina ha finito di caricarsi.
La cosa funziona 99 volte su 100, perché ogni tanto – specie su Safari – l’immagine non viene ridimensionata al primo caricamento della pagina.
Facendo refresh si sistema.
Quindi, nonostante possa essere una bella soluzione a livello estetico, non è a prova di bomba a livello di affidabilità.
Senza vedere l’esempio posso solo fare delle ipotesi:
1) l’evento fornito da jquery non è affidabile. Usi l’ultima versione?
2) facendo molti refresh consecutivi spesso si perde per strada qualcosa (immagini, stili). Eri in fase di stress test?
Ciao
Maurizio
Abbiamo usato l’ultima versione di jQuery, e comunque c’abbiamo lavorato sopra a più riprese io e diversi colleghi, senza uscirne.
Credo sia proprio un problema di tempistiche per il calcolo delle dimensioni dei blocchi, specie da parte di Safari.
Per quanto jQuery cerchi di appiattire le differenze fra browser, capita sempre che qualcosa non sia perfettamente uguale.
Il sito comunque aveva un layout di base che era piuttosto complesso, il che non facilitava certo la vita ai browser
Ma non ci sono possibilità di farlo girare su explorer 6?
Il problema di ie6 è:
overflow:hide;
ma non ho ancora capito come ovviare.
Non ho testato su IE6. Il problema della proprietà overflow è conosciuto:
expandingboxbug
In pratica la proprietà viene applicata solo su certi elementi. Devi quindi fare delle prove per avere una resa accettabile
Brutalmente su ie 6 l’ho tolto… Non è il massimo ma non lo è nemmeno quel browser