dimensionamento immagini

[mirkofm88]

Salve a tutti, ho creato una pagina web con l' utilizzo dei css, ma cè un problema.
Ho assegnato un immagine allo sfondo, una ai contenuti e una al menu di dimensione fissa, ma finche si guarda la pagina da un 17" tutto ok, ma se la guardo da un pc con schermo da 10" la metà della pagina non la vedo.
Cè un sistema per fare in modo che le immagini si rimpiccioliscano in base alla grandezza dello schermo?

Grazie.

edit: Leggendo un po in giro ho visto che non è possibile fare un resize con i css tranne nel caso in cui si imposti l' immagine con l' html e poi si fa il resize con i css.
E' possibile fare la stessa con il javascript, ma con il php è possibile?

[Mich_]

Anzitutto, per completare l'informazione, leggiti questo: Usare SVG per creare sfondi flessibili, scalabili e divertenti
Non che ti consigli di usarlo subito, ma potrebbe essere disponibile tra qualche tempo.

Per il resto, scalare le immagini di sfondo non e` possibile.
Quello che si puo` fare (anche con JS) e` caricare immagini diverse in base alla risoluzione. La stessa cosa e` possibile anche con qualsiasi linguaggio lato server, tipo PHP, ASP, JSP, ecc.

Invece l'uso di sovrapposizioni di oggetti (uno per lo sfondo da inserire con <img> e uno per il contenuto), non necessita di nessuna programmazione (ne` JS e neppure lato server), ma ha delle controindicazioni, tipo l'effetto nelle stampe, la deformazione delle immagini, la sgranatura dell'immagine in certe condizioni.

[mirkofm88]

Capisco, ho cercato in giro per la rete e ho trovato un sito che ha più o meno la stessa struttura di come voglio farlo io.
In questo sito è disponibile il codice css che può essere utilizzato per studiarlo.
il sito è questo .
Analizzando il codice html mi sono reso conto che non cè nessun riferimento ad uno script javascript e non viene nemmeno utilizzata la tecnica immagine html+resize css, quindi come hanno fatto?
Io vedo bene le immagini sia in uno schermo da 10" con risoluzione 800X600 che su uno da 19" con risoluzione 1280X960.

Grazie.

[Mich_]

Anzitutto va notato lo scopo per cui e` stato creato quel sito (ZenGarden): e` dimostrare cosa si riesce a fare con i CSS. Non e` un uso tipico dei CSS, e neppure un esempio da imitare. E` un gioco aperto a tutti che stressa i CSS in maniera enorme.

Comunque ho gia` detto:

Quello che si puo` fare (anche con JS) e` caricare immagini diverse in base alla risoluzione. La stessa cosa e` possibile anche con qualsiasi linguaggio lato server, tipo PHP, ASP, JSP, ecc.

Se la cosa viene realizzata tramite JS, resta una traccia nel codice, se lo si fa con linguaggio lato server, semplicemente il linguaggio carica nel CSS l'immagine piu` opportuna in base alla risoluzione. La logica potrebbe essere:

$ww = ... larghezza della finestra ...;
if (ww < 801) $imm = "immagine800.gif";
elsif (ww < 1001) $imm = "immagine1000.gif";
elsif (ww < 1201) $imm = "immagine1200.gif";
else $imm = "immagineBig.gif";
...
background-img = $imm;

Naturalmente la prima parte puo` stare dove si vuole, mentre nel codice che arriva al browser compare solo l'ultima riga con la variabile gia` sostituita.

Per verificare potresti vedere come appare il codice HTML/CSS nei casi di monitor diversi o anche di finestre diverse
[la risoluzione dello schermo viene trasmessa in modo automatico al server, mentre la larghezza della finestra puo` essere trasmessa tramite JS (da una pagina precedente - ad esempio una pag. di reindirzzamento) o mediante altri sistemi.]

[mirkofm88]

Si hai perfettamente ragione, però siccome il php non mi permette di conoscere la risoluzione dello schermo essendo un linguaggio lato-server volevo utilizzare un altro metodo, per non far vedere il codice javascript nel sorgente.
Comunque ho scritto una piccola funzione javascript e sembra funzionare bene.