Redimensionar proporcionalmente la imagen en función del tamaño de div principal

Question

Estoy usando la altura de ancho de navegador completa jquery blockUI para mostrar la imagen seleccionada de la galería. En la imagen de abajo está el esquema de vista en blockUI.
Básicamente ver en bloque lateralUI tiene ancho y alto establecidos en 100%.
En el interior hay dos divisiones más. Derecha tiene ancho establecido en 80% de la vista y contiene imagen.
La imagen tiene ancho y alto establecidos en 100% (pero esto es incorrecto, lo sé).
Las imágenes que se muestran aquí son imágenes en tamaños originales cargadas por los usuarios. Pero si el monitor mide 1024x768 y la imagen cargada es 600x1900, no sé qué imagen sale de la pantalla.
Entonces, ¿cómo puedo solucionar esto para mostrar esa imagen centrada y proporcional?

Answer 1

Uso max-width y max-height, tendrá que utilizar JavaScript en IE 6 si es necesario apoyarlo:

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

Esto mantiene la relación de aspecto del elemento img al cambiar el tamaño, hasta el máximo ancho y altura posibles.