在不創建空白的情況下按比例調整圖像大小的最佳方法是什麼？

Question

我可以按比例調整這樣一個形象：

HTML：

<div style="height: 500px;"> 
    <img src="http://placekitten.com/500/500"> 
</div> 

CSS：

img { 
    max-width: 100%; 
    max-height: 100%; 
} 

Fiddle

WHE如果水平縮小窗口大小，圖像變小，但會在下面創建空白。

我該如何防止這種情況發生，最好只使用CSS，或者如果不使用盡可能少的JS？

爲了給你一個想法，如果你不知道，它已經在this site但jQuery插件

無論如何，我期待着你的答案:)做

Answer 1

好像你正在尋找background-size: cover。這將拉伸圖像以完全覆蓋給定元素。

div { 
    background-size: cover; 
    background-image: url(http://placekitten.com/500/500); 
    background-repeat: no-repeat; 
    background-position: center top; 
} 

參見http://jsfiddle.net/pNyGC/瞭解效果演示。