在保持寬高比的情況下縮放背景圖片的div尺寸

Question

在這裏稍微偏離一點點。

我有一個div thats約。 2000px寬×800px高。

裏面的div我有另一個div，背景圖像。

我想要內部的div，取得父容器的80％的高度，併爲寬度保持與高度的比例，所以背景圖像不扭曲，如果這是有道理的？

即時通訊使用CSS3縮放背景圖像100％x和y。

.internal-box { 
    background:url(images/elevator.png) repeat scroll 0 0 transparent; 
    background-size:100% 100%; 
    height: 80%; 
    width: auto; 
} 

http://jsfiddle.net/JbmE6/

Answer 1

試試這個：

background-size: contain; 
background-repeat: no-repeat; 

但是請注意，這可能無法完全在所有瀏覽器，如IE8的支持。

另外請注意，這並不會使<div>本身變小，它只會使背景圖像只出現在相關部分。如果您在.small上輸入border，您將會看到實際上它的容器寬度爲100％。