Изменить размер изображения до 100% высоты div и сохранить соотношение сторон

Question

Вот быстрый набросок.

Мне бы хотелось, чтобы изображения в div галереи составляли 100% высоты div галереи и сохраняли соотношение сторон

И

что изображения будут меняться, как вы изменили бы размер браузера.

Возможно ли это?

Любая помощь будет высоко ценится.

Вот что я сделал до сих пор: www.nulaena.si/photob/.

Answer 1

Как то так?

        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 вашей галереи, и размер изображений достаточно велик, чтобы заполнить большую глубину экрана, чтобы они не pixellate при увеличении. Изображения, размер которых выражен в процентах, увеличиваются при увеличении родительского элемента (если также указан процент).