Ridimensiona proporzionalmente l'immagine in base alla dimensione div genitore

Question

Sto utilizzando il blocco jquery blockUI di larghezza totale del browser per visualizzare l'immagine selezionata dalla galleria. Nell'immagine qui sotto è lo schema di visualizzazione in blockUI.
Fondamentalmente vista nel blocco lateraleUI ha larghezza e altezza impostate su 100%.
All'interno ci sono altri due div. Right ha larghezza impostata all'80% della vista e contiene immagine.
L'immagine ha larghezza e altezza impostate al 100% (ma questo è sbagliato, lo so).
Le immagini che mostro qui sono immagini in dimensioni originali caricate dagli utenti. Ma se il monitor è 1024x768 e l'immagine caricata è 600x1900, non so che cosa quell'immagine vada fuori dallo schermo.
Quindi, come posso risolvere questo problema per visualizzare quell'immagine centrata e proporzionale?

Answer 1

Usa max-width e max-height, è necessario utilizzare JavaScript in IE 6, se avete bisogno di sostenerlo:

#blockUI img { 
    max-width: 100%; 
    max-height: 100%; 
} 

Ciò mantiene le proporzioni dell'elemento img durante il ridimensionamento, fino alla larghezza e altezza massime possibili.