如何使用CSS調整圖片大小以適應屏幕高度？

與許多想要圖像填充整個屏幕的人不同，我只關心圖像高度。我怎樣才能使用CSS（最好不JavasScript）來製作任何尺寸的圖像，填充高達100％的最大可能的瀏覽器窗口高度，同時保持圖像的高寬比，圖像的重新尺寸寬度到瀏覽器並不重要。如何使用CSS調整圖片大小以適應屏幕高度？

我與這個網站的工作：

<div class="images"> 
    <img/> 
</div>

太謝謝你了！

2011-09-09 Mohammad

img { height:100% }

，或者如果你想明確

img { height:100%; width:auto; }

編輯：

這個答案需要一些關注。演示被打破，通常是一團糟。我已經用新圖像更新了它，更新了規則以補償圖像的內聯本質，並規範了body和html元素的高度和寬度。

2011-09-09 21:12:46

@Mohammad樂於幫助:) –

你的鏈接不工作... – Vickel

@Vickel其實它看起來像jsfiddle可能有服務器問題。我收到500內部服務器錯誤。 –

這可能是矯枉過正：

.img { 
    position: absolute; 
    height: 100% 
    top: 0; 
    bottom: 0; 
}

2011-09-09 21:14:57 Joe

沒有這是正確的想法，除非你不需要定位，頂部或底部，除非它在一個容器中。重要的部分是離開寬度自動 –

是的，因爲約瑟夫說頂部或底部不是真的需要。 – Mohammad

呃..從我在這裏看到的，你真正需要做的就是放置你的容器。該方法基本上從容器中移除元素。嘗試讓你的圖像div'position：absolute; left：0; top：0; height：100％'。 –

你可能也想看看的VH，VW，Vmin和Vmax CSS單位 - 這是pretty well supported。有一篇很好的文章描述如何達到100％的高度here。

順便說一句 - 謹防空白：這可能會添加不需要的邊距。刪除空間，添加浮動或使用破解將對此進行分類。另外，當使用其他方法時，請記住爲body和html元素設置height: 100%。

2014-11-19 20:45:37

回答