在垂直调整浏览器窗口大小时，图像的比例调整大小？

Question

我有display:table的文章和里面的图像包装与display:table-cell实现图像的垂直和水平对齐。图像设置为80％的宽度和高度，因此在调整浏览器窗口大小时，图像应按比例缩放。

<article class="layer"> 
    <div class="wrap"> 
     <img src="whatever.jpg" alt="image"/> 
    </div> 
</article> 

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

有没有办法调整的browserwindow当垂直以及实现同样的事情？ 我很想用纯CSS的方式做，但我也会使用jQuery或Javascript来做到这一点。

任何想法？先谢谢你。

Answer 1

的javascript：

window.onresize = function(){ 
     $('article.layer img').css({ 
     maxHeight: $('article.layer').height() * 0.8, 
     maxWidth: $('article.layer').width() * 0.8 
     }); 
    }; 

的jQuery：

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

DEMO