Динамическое уменьшение изображения при сохранении пропорции

Я пытаюсь динамически масштабировать переменные портретные и ландшафтные изображения, чтобы соответствовать пропорционально в окне браузера.

Моя текущая попытка изменения размера изображения находится здесь: http://jsfiddle.net/6pnCH/4/

Мне нужно, чтобы изображение было масштабировано вертикально при загрузке браузера.

На данный момент у меня только началось масштабирование при onBrowserResize.

Также изображение, похоже, растягивается и деформируется при изменении размера, и мне нужно держать их пропорциональными.

Довольно уверен, что Javascript является ключом к решению этого вопроса, но мои знания об этом довольно ограничены, поэтому любая помощь была бы весьма признательна.

Код Javascript:

$(window).resize(function(){
  $('.slide img').css({
    maxHeight: $('.slide').height() * 0.8,
    maxWidth: $('.slide').width() * 0.8
  });
});

Код CSS:

#slide {
    text-align: center;
    background-color: green;
    height: 100%;
    width: 100%;
    display: inline-block;
    }

.slide {
    vertical-align: middle; 
    display: table-cell;
}

.slide:after {
    content: ' ';
    height: 100%;
    display: inline-block;
    vertical-align: middle
}

.slide img {
    vertical-align: middle;
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
} 

Код HTML:

<div id="slide" class="slide"><img src="image.jpg"></div>