Пропорциональное изменение размера изображения при изменении размера окна браузера по вертикали?

У меня есть статьи с display: table и оболочкой изображений внутри с display: table-cell для достижения вертикальное и горизонтальное выравнивание изображений. Для изображений заданы 80% ширины и высоты, поэтому при изменении размера окна браузера изображение должно масштабироваться пропорционально.

   

      
   


html, body, #content {
    margin: 0; padding: 0;
    height: 100%;
    width: 100%;
}

article.layer {
    position: relative;
    display: table;
    height: 100%;
    width: 100%;
}

article.layer img {
   max-width: 80%;
   max-height: 80%;
}

div.wrap {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

Я стараюсь, чтобы изображение всегда отображалось полностью. Поэтому я не хочу, чтобы он обрезался при изменении размера окна браузера. Это отлично работает сейчас, когда я изменяю размер окна браузера по горизонтали, но не при изменении его размера по вертикали.

Вот пример: http://jsbin.com/ugumuj/10/edit#preview

Есть ли способ добиться того же, изменяя размер окна браузера по вертикали? Я бы хотел сделать это на чистом CSS, но я бы также использовал для этого jQuery или Javascript.

Есть идеи? Заранее спасибо.