在保持宽高比的同时用背景图像缩放div大小

Question

来这里有点卡住。

我有一个div多数民众赞成在大约。宽2000像素，高800像素。

在该div内，我还有另一个div，带有背景图片。

我希望内部div占据父容器的高度的80％，并且宽度与高度保持比例，因此背景图像不会失真，如果这有意义？

我使用CSS3将背景图片的x和y比例缩放为100％。

.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>自身变小，只会使背景图像仅出现在相关部分。如果戴上border，.small您会发现实际上它是其容器的100％宽度。