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

Question

来这里有点松懈。

我有一个大约 div。2000px 宽 x 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>自身更小，它只会使背景图像仅出现在相关部分。如果你把 aborder放在上面，.small你会看到它实际上是其容器的 100% 宽度。