Пропорционально изменить размер изображения в зависимости от размера родительского элемента

Question

Я использую полную ширину браузера jquery blockUI для отображения выбранного изображения из галереи. На изображении ниже приведена схема просмотра в blockUI.
В основном, вид в боковом блоке имеет ширину и высоту 100%.
Внутри есть еще два div. Право имеет ширину, установленную на 80% вида, и содержит изображение.
Ширина и высота изображения установлены на 100% (но я знаю, что это неправильно).
Изображения, которые я показываю здесь, являются изображениями в оригинальных размерах, загруженных пользователями. Но если монитор имеет разрешение 1024x768, а загруженное изображение - 600x1900, я не вижу, что это изображение выходит из экрана.
Так как же это исправить, чтобы отображать изображение по центру и пропорционально?

Answer 1

Используйте max-width и max-height, вам нужно будет использовать JavaScript в IE 6, если вам нужно его поддерживать:

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

Это сохраняет соотношение сторон img элемента при изменении размера, вверхдо максимально возможной ширины и высоты.