Proportionally resize image based on parent div size

Question

I am using full browser width height jquery blockUI to display selected image from gallery. On the image bellow is scheme of view in blockUI.
Basically view in side blockUI has width and height set to 100%.
Inside there are two more divs. Right has width set to 80% of the view and it contain image.
Image has width and height set to 100% (but this is wrong I know).
Images that I display here are images in original sizes uploaded by users. But if monitor is 1024x768 and uploaded image is 600x1900 I don't what to that image goes out of the screen.
So how can I fix this to display that image centered and proportional?

Answer 1

Use max-width and max-height, you will need to use JavaScript in IE 6 if you need to support it:

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

This keeps the img element's aspect ratio when resizing, up to the maximum possible width and heights.