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

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/.

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>

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).