調整大小一個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測試）爲您的畫廊格內的圖像標籤，以及大小大到足以填滿一個大屏幕的深度，從而擴大時，他們不像素化圖像。當父元素放大時（如果還有一個百分比），以百分比表示的圖像會放大。