Resize automatico immagini

**pazzo2** · 16-03-2006, 13:57

Ciao ragazzi
sto realizzando una classe per un resize di immagini e ho provato con

img { width:400px }

e va bene...
però mi aumenta al 400px tutte le immagini.. invece io voglio rimensionare solo quelle più grandi (per adattarle)....

ho pensato di fare cosi

img { max-width:400px }

ma non succede nulla

**Leggero82** · 16-03-2006, 15:55

non so se ho capito bene ciò che vuoi fare ma se utilizzi quel codice CSS tutte le immagini avranno quella larghezza.
perchè non provi invece così:

img.larghe { width:400px }

poi nell'HTML metterai <img src...... class="larghe"...>

**pazzo2** · 16-03-2006, 17:50

è proprio quello che voglio evitare
di modificare tutte le immagini presenti nel sito.... volevo creare una classe che mi ridimensione le immagini.. ma soltanto quelle che sono più grandi di 400pz (per rimpiccolirle)..le altre le deve lasciare uguale (è per questo che usavo max-widh) ma non funziona

**Leggero82** · 16-03-2006, 18:24

ah, non l'avevo capito
la prima cosa che mi viene in mente è provare ad ottenere la larghezza dell'img ed eseguire un IF

if width > 400 then
assegni la classe all'immagine
else
lasci la sua dimensione naturale
end if

sono sicuro che ci siano soluzioni più pratiche, attendiamo qualche esperto che interessa anche me questa cosa

**Mich_** · 16-03-2006, 18:36

la soluzione del max-width e` corretta, ma non funziona in IE.

Per IE credo sia necessario attribuire una larghezza direttamente nel codice HTML tramite JS:

codice:

if(document.all) {
  for(var i=0; i<document.images.length; i++) {
    var imm = document.images[i];
    if(imm.width > 400) {
      imm.width = 400;
      // eventualmente modificare l'altezza in proporz.
    }
  }
}

questo codice puo` esser richiamato al onload del body.

**pazzo2** · 17-03-2006, 11:04

Ok perfetto...funziona alla grande..

P.S ripetere questo scritp in ogni pagina rischio di rallentare??

**Mich_** · 17-03-2006, 11:20

Non dovrebbe rallentare molto, ma dipende dal numero di immagini, chiaramente.
L'effetto e` quello di un ritardo nel caricamento, una risistemazione della pagina appena arrivata.
E comunque si nota solo in IE (negli altri browser funziona il max-width).

Si potrebbe inserirlo/chiamarlo solo in presenza di IE 6 e precedenti (pare che IE7 riconosca il max-width).

Ecco un esempio:

codice:

<!--[if lte IE 6]><script language="javascript">
function ridim_imm() {
  for(var i=0; i<document.images.length; i++) {
    var imm = document.images[i];
    if(imm.width > 400) {
      imm.width = 400;
      // eventualmente modificare l'altezza in proporz.
    }
  }
}
window.onload = ridim_imm;
</script><![endif]-->

Purtroppo non si puo` inserire questo script nella head (deve stare nel body), a causa dell'ultima riga (ridefinizione dell'onload), e chiaramente interferisce con altri onload eventualmente presenti.

**pazzo2** · 17-03-2006, 12:04

Ok io ho messo il tuo precendente script nell'head.... e richiamandolo nel body con onload e devo dire che funziona..

quindi mi confermi che quello script funziona solo con IE?

Possibile che non si può fare con i CSS?

**Mich_** · 17-03-2006, 13:25

Veramente non lo so con esattezza.

Il fatto e` che in IE non funziona il max-width, mentre il width lavora come se fosse min-width.

Ci sono degli hack, forse, ma in questo caso mi sa che occorre fare con JS. Prova a vedere in siti tipo constile o sim (riferimenti tra i "link utili" - sezione layout).

Tornando allo script.
Se usi il
<body onload="...">
questo viene richiamato in ogni browser.
Se invece metti lo script in un commento condizionale, definendoci anche l'onload, la cosa e` assolutamente invisibile per i browser diversi da IE.

Discussione: Resize automatico immagini

Strumenti discussione

Ricerca discussione

Visualizza

Resize automatico immagini

Permessi di invio