0 
<!DOCTYPE html>
<html>
    <head>
        <style>
            #container {width:1050px; height:106px;background:red;}
            #image {background-image:url('logo.png');height:106px;}
        </style>
    </head>
    <body>
        <h1>Hello World!</h1>
        <div id="container">
            <div id="image"></div>
        </div>
    </body>
</html>

问题

我的背景图片（logo.png），大小是1624*174，我希望图片根据#container调整它的高度，例如如果#container高度：106px，那么图片大小将是989*106，如果#container高度：200px ，那么图片大小为1866*200，所以基本上我想做的是：

  1. 图片高度=#容器高度
  2. 保持图片宽度和高度的比例。

那我该怎么办？

4

1 回答 1

2

您可以background-size在 BG 上使用 CSS 规则div。

background-size: contain;

或者对于您的确切用例，您可以进行高级尝试：

background-size: 106px, auto, cover;

其中，106px是最小值，然后水平延伸并垂直覆盖。

注意：这仅适用于新浏览器。

于 2013-06-06T09:59:23.447 回答