在保持纵横比的同时使用背景图像缩放 div 大小答案

【问题标题】：Scaling div size with background image whilst keeping aspect ratio在保持纵横比的同时使用背景图像缩放 div 大小
【发布时间】：2013-02-05 11:52:28
【问题描述】：

来这里有点松懈。

我有一个大约 div。 2000px 宽 x 800px 高。

在那个 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/

【问题讨论】：

请澄清您的问题，并可能添加一个 jsfiddle 示例供我们测试我们的解决方案。
我添加了一个小提琴@asifsid88，希望评论解释得更好。
zenelements.com/blog/css3-background-images

标签： javascript jquery html css

【解决方案1】：

试试这个：

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

但请注意，并非所有浏览器（例如 IE8）都完全支持此功能。

另请注意，这不会使<div> 本身变小，它只会使背景图像仅出现在相关部分。如果你把border 放在.small 上，你会看到实际上它是容器的100% 宽度。

【讨论】：