Proportionally resizing an image based on the size of the parent div

Question

I am using the full width jquery blockUI of the width of the browser to display the selected image from the gallery. The figure below shows the view in the block module.
Basically, the view in the side UI block has a width and height of 100%.
Inside there are two more divs. The right one has a width of 80% of the view, and it contains the image.
The image has a width and height of 100% (but this is wrong, I know).
The images that I display here are images in original sizes uploaded by users. But if the monitor is 1024x768, and the downloaded image is 600x1900, I don’t understand what comes out of the screen with this image.
So how can I fix this to display this centered and proportional image?

Answer 1

Use max-widthand 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%;
}

When resizing, the maximum possible width and height are preserved.