调整大小一个div的图像以100％的高度和保持宽高比

Question

Here is a quick sketch.

我想实现的是，在廊的div图像将图库div的高度的100％，并保持纵横比

AND

图像将调整大小，因为您将更改浏览器的大小。

这可能吗？

任何帮助将不胜感激。

这是我到目前为止所做的：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测试）为您的画廊格内的图像标签，以及大小大到足以填满一个大屏幕的深度，从而扩大时，他们不像素化图像。当父元素放大时（如果还有一个百分比），以百分比表示的图像会放大。