ブラウザウィンドウの縦方向のサイズを変更すると、画像のサイズが変更されますか？

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