Resize image to 100% height of a div and keep aspect ratio

Question

Here is a quick sketch.

I would like to achieve that images in the gallery div will be 100% of the height of the gallery div and keep the aspect ratio

AND

that images would resize as you would change the size of browser.

Is this possible?

Any help would be much appreciated.

Here is what I made so far: www.nulaena.si/photob/.

Answer 1

use #yourgallerydiv img { height: 100%; } (although width is preferable - I haven't tested for height) for the image tag inside your gallery div, and size the images large enough to fill a large screen depth so they do not pixellate when enlarged. Images sized in percentages enlarge when the parent element enlarges (if that is also given a percentage).

Answer 2

Something like this?

        body {
            padding:0;margin:0;
        }
        #header {
            position: absolute;
            background: orange;
            top:0;
            left:0;
            width: 100%;
            height: 100px;
        }
        #footer {
            position: absolute;
            background: orange;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100px;
        }
        #middle {
            position: absolute;
            top: 100px;
            bottom: 100px;
            left: 0;
            width: 100%;
        }
        img {
            height:100%;
            width: auto;
        }

<div id="header">header</div>
<div id="middle">
    <img src="images/myImage.jpg" />
</div>
<div id="footer">footer</div>