rimpicciolire immagini più grandi di un div che le contiene

[Sleazy]

Ciao a tutti, premettendo che sono alle prime armi con javascript e premettendo che lavoro per la maggior parte con prototype vi chiedo un consiglio:

Sto realizzando una community dove gli utenti hanno in gestione delle pagine e ne gestiscono i contenuti con il famoso editor FCK inseriscono ciò che volgliono nella pagina, permette di uplodare immagini e file.

Problema:
Se il layout del sito ha un'impostazione grafica ben definita c'è il rischio che un utente carichi un immagine più larga del div che la contiene sballando tutto l'impaginato.

Soluzione
Ciò che vorrei fare è che se nel div che contiene i contenuti inseriti dall'utente ci sono immagini piu' larghe di lui, ridimensionarle al volo, lato client (solo visivamente, non realmente perciò) evitando sballamenti di impaginato.

Voi mi direte che non è per niente carino far caricare ad un visitatore un'immagine grande per vederla più piccola, ma daltronde quella è l'immagine caricata e niente ci si può fare no? Mi pare impensabile dover intercettare tutte le immagini caricate dagli utentei con FCK editor e solo le più grandi ridimensionarle lato server... credo sia da impazzire..

Secondo voi esiste qualcosa di già fatto? qualcuno sa come fare?
Conto nel vostro aiuto e spero di essere stato chiaro

[br1]

Non serve il javascript, secondo me basta un pochino di CSS: usa le dimensioni dell'immagine in % dentro il div ...

ti sposto

[Sleazy]

ok ma andrei a modificare tutte le immagini in quel div io devo dimensionare solo le più grandi... mi sa che i css non sono suff.
grazie

[Sleazy]

non credete sia il caso riportare questo thread nel forum javascript?

[Mich_]

Ha ragione br1: basta una dimensione % nel CSS:

Esempio:

HTML:
<div class="contenitore_foto">
  [img]...[/img]
</div>

CSS:
div {
  width: ...px;
  height: ...px;
  border: 2px solid red;
}
div img {
  width: 100%;
  height: 100%;
}

Nota: questo deforma le immagini se non sono in proporzione con il contenitore, ma si puo` realizzare anche senza deformazione: devi solo definire UNO SOLO tra width e height