Resize images so that they keep aspect ratio

Question

I want my images to be as large as possible in the browser window, but they can never lose aspect ratio. When the browser is resized, the images should be too. All of the image should be visible at all times.

I use this script now, but the result is not what I want. Can anyone tell me how to solve this so that the images will be as wide and as tall as possible without losing aspect ratio? I guess that some sort of max-width and max-height should be used?

<script>
var W = $(window).width(),
    H = $(window).height();

$('img').height(H).width(W);



function imgsize() {
    var W = $(window).width(),
        H = $(window).height();

    $('img').height(H).width(W);
}
$(window).bind('resize', function() { imgsize(); });

</script>

Answer 1

Take a look at this answer. Set maxWidth and maxHeight to screen size.

You can also use css:

max-width: 100%;
max-height: 100%;