How to resize an image to fit in the browser window?

Question

This seems trivial but after all the research and coding I can\'t get it to work. Conditions are:

1. The browser window size is unknown. So please don\'t propose

Answer 1

Here is a simple CSS only solution (JSFiddle), works everywhere, mobile and IE included:

CSS 2.0:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

img {
    padding: 0;
    display: block;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
}

HTML: