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

Question

Here is a quick sketch.

I would like to ensure that the images in the gallery div are 100% of the height of the gallery div and keep the aspect ratio

and

so that the images resize as you resize the browser.

Is it possible?

Any help would be greatly appreciated.

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

Answer 1

Something like that?

        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>

Answer 2

#yourgallerydiv img { height: 100%; } ( width - height) div , , . ( ).