将<div>的高度更改为背景图像的高度

Question

I have two div's:

<div class="iphonebackground">
  <div class="screenbackground"></div>
</div>

.iphonebackground {
    background-image:url("../img/iphone-frame.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    height:576px;
}

.screenbackground {
    background-image:url("../img/iphone-background.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size:100%;
    height:576px;
}

首先，iphonebackground的背景图像设置为iPhone框架的图像（http://chpwn.com/apps/iphone-frame.png）。其次，screenbackground的背景图像设置为PNG图像，与屏幕图片尺寸相同（https://dl.dropbox.com/u/290586/iphone-bg.png）。

结果是使页面呈现出如下内容：http://imgur.com/yVF9gyg。由于我的网站基于Twitter Bootstrap，div会调整大小以适应浏览器窗口大小，因此在较小的显示器上，它看起来像这样：http://imgur.com/Q2Qy4wn。

正如您所见，div的高度固定为576px。这意味着在第二张图片中，背景图像的上方和下方有很多空白空间。是否有一种方法可以将div的高度设置为背景图像高度的大小，从而消除空白空间？

- Benedict Lewis

---

请为此创建一个 Fiddle。 - SaurabhLP

Answer 1

背景图片对其所附着的DIV的大小没有影响。该DIV的大小将由其内容或通过CSS中明确设置的宽度和高度来确定。

如果您有一个具有％宽度（即未知像素宽度）的DIV，则无法根据此未知宽度设置高度，除非使用JavaScript或...新的CSS calc（）函数，在其中可以将高度指定为未知宽度的比率，并让浏览器解决。有关详细信息，请参见https://developer.mozilla.org/en-US/docs/Web/CSS/calc。

支持正在改善（根据caniuse.com为78％），但您不能依赖它。

[编辑]在寻找解决方案时，我发现了一个使用padding-top的优秀hack，由用户Hasanavi在this question的答案中编写[/编辑]

- terraling

Answer 2

你可以尝试在你的 div 上使用 line-height CSS 属性。

line-height: normal; 
line-height: 3.5;    /* <number> values */
line-height: 3em;    /* <length> values */
line-height: 34%;    /* <percentage values */
line-height: 50px;   /* <Pixel> values */

line-height: inherit

希望这能有所帮助...

- Phillip-juan

Answer 3

你可以使用

height:auto; in both

- MR. Kumar

---

这只是渲染了没有内容的<div>，因此它没有高度。 - Benedict Lewis

Benedict Lewis：我的意思是他可以使用height:auto来自动调整图像的大小，无论是增加还是减小。 - MR. Kumar