Resizing image in proportion with vertical resizing of browser window?

Question

I have articles with display:table and wrapping images inside using display:table-cell to achieve vertical and horizontal alignment of images. Images are set to 80% of the width and height, so when you change the size of the browser window, the image should be scaled in the ratio.

 <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; } 

What I'm trying to do is save an image that will be fully displayed. Therefore, I do not want it to be disabled when resizing the browser window. This works fine now when I resize the browser window horizontally, however when resized vertically it does not change.

Here is an example: http://jsbin.com/ugumuj/10/edit#preview

Is there a way to achieve the same thing when resizing the browser window vertically? I would like to make this a clean CSS way, but I also used jQuery or Javascript for this.

Any ideas? Thank you in advance.

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