使用背景图像缩放div大小，同时保持纵横比

Question

在这里来一点点。

我有一个大概的div。 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>本身变小，只会使背景图像仅显示在相关部分中。如果您在border上放置.small，您会看到它的容器宽度为100％。