Printable View
volevo fare una pagina contenente immagini piccoline da cui cliccando su un'immagine si apre un'altra pagina con l'immagine alle sue dimensioni reali. c'è un modo per ridurre le immagini in maniera dinamica?
cioè ad es. se hanno risoluzione 100X200 vengano ridotte a 10X20 se 600X200 a 30X10 e così via. non intendo ridurle nel vero senso (cioè riducendo i pixel con un prog di grafica), ma semplicemente adattarle alla pagina; si può fare...?
grazie.
Basta che ne imposti la dimensione ...
Sai come fungono i css?
Allora, inserisci all'interno di <head> quanto segue:
<style type="text/css"><!--
.rid { width: 10% ; height: 10% }
--></style>
Quindi, quando vuoi che l'immagine sia inserita ridotta, la inserisci così:
<img class="rid" src="tuaimmagine" ...>
Però una cosa del genere appesantisce la pagina ... le immagini vengono sempre caricate per intero.
Inserire delle immagini già ridotte con un programma di grafica è molto meglio (e non richiede poi questo gran tempo), in particolare se le immagini in questione sono piuttosto pesanti.
P.S.: sposto in Liv. 1
ho provato ma non funziona... non mi disegna proprio le immagini... nn è che per sbaglio manca qualche carattere o simile? [bisogna mettere in html i valori height e width?]
no no..quelli sono facoltativi :) non è indispensabile metterli :D e poi se hai impostato tutto come ti ha detto gve hai già impostato quei valori ;)Citazione:
Originalmente inviato da wanttobefree
non so.. c'è qualcosa che non va: se scrivo % non funziona (le img non vengono riprodotte [ma vengono caricate cmq]) se sostituisco px a % invece le immagini si vedono correttamente. qualcuno mi sa dire xkè..? :oops:
le immaginid di solito non si mettono in percentuale ma in pixel :)Citazione:
Originalmente inviato da wanttobefree
ah..ok, ma a questo punto c'è un modo per ridurre le dimensioni delle immagini dinamicamente?
cioè in base alla risoluzione iniziale, es. riducendo a 10X20 quelle da 100X200 o a 20X15 quelle da 800X600 :shock:
ho provato a scrivere height='%' e mi disegna l'immagine come un punto, ma se scrivo height='100%' non mi disegna niente... dov'è che sbaglio...? :oops:
Ma lo hai scritto nel CSS?
se invece lo scrivi internamente ad un tag usa:
style="width:20%;"
ma è uguale no?? se lo scrive nel css evita di riscriverlo tutte le volte :DCitazione:
Originalmente inviato da aeclanum
Si è uguale, ma avevo l'impressione che avesse scritto qualcosa del genere:
<img src="XXXX" width=10%>
e non
<img src="xxxxx" style="width:10%">
ma basta ke metta l'attributo class="rid" a <img src="urlimmagine"> se ci aggiunge quello i dati li dovrebbe prendere dal css no??
ho capito dove sbagliavo... il semplice fatto che aggiungevo anche l'attributo height, e visto che le immagini nn possono venir distorte, il browser non le disegna. insomma mi basta specificare width che tanto l'altezza me la riduce in proporzioe... :D
grazie per l'interessamento :wink:
perchè non dovrebbero essere distorte?
bhe pensavo potesse essere questo il motivo.
sta di fatto cmq che se specifico solo width me l'accetta, se specifico anche height o solo height non funziona...
guarda qua:
<style type="text/css"><!--
.rid { width: 10% ; height: 10% }
--></style>
questo è il css che hai messo (almeno credo) height è già impostato li..nn lo puoi mettere 2 volte..:)
scusa, non mi sono spiegato, io ho scritto così (non funziona):
<img src='tutti_gruppi/immagini/1.jpg' style='width: 10%;height: 10%'>
così non mi funzia nemmeno:
<img src='tutti_gruppi/immagini/1.jpg' style='height: 10%'>
se scrivo così invece funzia: :shock:
<img src='tutti_gruppi/immagini/1.jpg' style='width: 10%'>
cmq non ti preoccupare, mi basta usare anche solo width..solo che non capisco perchè questo problema... :(
si ma così ho qualche dubbio ke ti prenda i dati dal css :D
ma dovrebbe funzionare senza bisogno del css no?
credo di si..ma il css ti risparmiava la fatica di scrivere le dimensioni in tutte le immagini :D
wanttobefree: Abbi fede nei consiglieri :D
usa gli sctyle sheets (css).
Ho provato su IE, Opera e Mozilla e funge alla grande (stranamente uguale preciso comportamento per tutti e tre)
Dunque ti consiglio così:
[code:1:520e0e50a5]<style>
.rid { width: 10%; }
</style>
<img class=rid src=http://tuosito.altervista.org/dir/immagine.jpg>[/code:1:520e0e50a5]
Se ti scoccia (da quel che intuisco) usare un file .css esterno non c'è problema: all'interno del tag a blocco HEAD metti un bel blocco STYLE (come quello qui sopra) .. volendo funge anche se lo metti ovunque nel body, certo prima di dove utilizzi i class a cui si riferiscono le img.
Piccola nota:
si indica solo la width in percentuale anche perché se funzionasse per entrambe le dimensioni, 10% x 10% le proporzioni verrebbero sballate. In questo modo si basa sulla width e l'altezza la ricava in proporzione (questa devo dire che l'hanno pensata bene una volta tanto)
un altro vantaggio dei css: se devi kambiare le dimensioni delle immagini modifiki solo una prte di codice (il css) invece se nn usi il css le devi modificare una x una
Ho capito!
height a me funziona, ma si distorce tutta l'imagine ... inoltre provate a impostare width: 100% ... viene a tutta pagina, non in dimensioni originali!
Conclusioni: i parametri di width e height si basano, quando dati in percentuali, sulle dimensioni del containing-block, ovvero della cella in cui è inserita l'immagine ... non molto utile in genere per le immagini, ma in effetti corrisponde a come viene calcolato per tutti gli altri elementi html.
ah ecco! allora avevo detto giusto quando ho detto che si può impostare solo la width... :wink: