Resize immagine

[Toelupe]

Ho un piccolo problema, ho una pagina-articolo generata in php, dove ci sono delle immagini piccole che cliccandoci sopra si ingrandiscono.
Ora siccome dove sono hostato le librerie Gd non sono attive, vorrei poter fare tutto via css, ora mi spiego meglio.
Mettiamo che io abbia un'immagine di 640x480 pixel, vorrei che nella pagina-articolo venga visualizzata in 128x96 pixel e cliccandoci sopra mi mostra quella grande.
Secondo voi è possibile fare una cosa del genere, avevo pensato di usare le percentuali o impostare una grandezza precisa, ma poi mi sono accorto che se ho due immagini di diversa grandezza quando vengono rimpicciolite sono diverse una dall'altra, a me servirebbe che fossero uguali in altezza, in modo tale da non rovinare tutto il layout dell'articolo.
Grazie ancora.

Ciao

[Mich_]

Quello che chiedi e` fattibile, ma comunque l'immagine viene trasmessa completa, per cui la banda usata e` quella dell'immagine grande.

Per settare le dimensioni nel CSS:
img {
width: 128px;
height: 96px;
}
Questo setta le dimensioni di tutte le immagini della pagina.

per visualizzare l'immagine grande in un <div>, poi hai necessita` di fare un rollover (in JS).

[Toelupe]

Avevo pensato ad un css cos', però ho il problema che va bene per un'immagine che abbia sempre quelle proporzioni; mettiamo che abbia un'immagine di 300x600px quando vado a ridimensionarla mi si controrce a causa dei valori impostati dal css.
Quello che non riesco a fare invece è di impostare un'altezza e una larghezza massima che le immagini devono avere in modo da non sforare.
Esempio:
Immagine 1 = 640x480px = resize 128x96px
Immagine 2 = 300x600px = resize 48x96px
Immagine 3 = 1200x700px = resize 164x96px
Secondo te è fattibile una cosa del genere.

[Mich_]

Non credo sia possibile con i CSS da soli.

Io lo farei appoggiandomi a JS.

1. carichi le immagini:
var immagini = new Array();
immagini[0] = new Image();
immagini[0].src = "immagine1.jpg";
immagini[1] = new Image();
immagini[1].src = ...;
...

2. per ogni immagine ricavi le dimensioni reali e poi le scali:

var w,h,r,w1,h1,pos; // definizioni variabili globali
var rapp = 128/96; //rapporto ideale
for (var i=0; i<immagini.length; i++) {
  w = immagini[i].width;
  h = immagini[i].height;
  r = w/h; // rapporto dimensioni
  if(r < rapp) { // caso altezza maggiore
    h1 = 96;
    w1 = Math.round(r/h1);
  } else {       // caso larghezza maggiore
    w1 = 128;
    h1 = Math.round(r*w1);
  }

  pos = document.getElementById('ID_OGGETTO_DOVE_SCRIVERE')
  pos.style.width = w1;
  pos.style.height = h1;
  pos.src = immagini[i].src;
}

Questo loop va inserito in una funzione da richiamare DOPO aver definito i vari tag <img id='ID_OGGETTO_DOVE_SCRIVERE'>

[Toelupe]

Certo che a volte mi chiedo se sono veramente scemo o no, ora so che lo sono
Ho creato un ID che applico ad ogni immagine fatto così:

#img-small {
height: 96px;
width: auto;
}

Così mi rimpicciolisco l'immagine usando come base principale l'altezza e lascio che sia in automatico il browser a calcolare la larghezza.
Era una cosa così semplice che non ci avevo pensato

[Toelupe]

Rimane sempre il fatto della banda usata, a questo punto mi sa che mi conviene uploadare oltre alle immagini grandi anche quelle piccole, così risparmio banda.
Peccato perchè era un semplice ed efficace trucchetto