在垂直調整瀏覽器窗口大小時，圖像的比例調整大小？

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