html - 将 的高度更改为背景图片的高度

Question

我有两个 div:

<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 将 background-image 设置为 iPhone 框架的图像 (http://chpwn.com/apps/iphone-frame.png)。第二个，screenbackground 将 background-image 设置为 PNG 图像，其大小与 iPhone 屏幕上的图像相同(https://dl.dropbox.com/u/290586/iphone-bg.png)。

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

如您所见，div 的高度固定为 576px。这意味着在第二张图片中，背景图片的上方和下方有很大的空白区域。有没有办法设置 div 的高度，使它们与背景图像的高度一样高，从而消除空白？

Answer 1

背景图像对其所附加的 DIV 的大小没有影响。该 DIV 的大小将由其内容决定，如果在您的 CSS 中明确设置，则由宽度和高度决定。

如果你有一个宽度为 % 的 DIV(即未知像素宽度)，那么你不能根据这个未知宽度设置高度而不求助于 JavaScript，或者...新的 CSS calc() 函数，在那里你可以将高度指定为未知宽度的比率，让浏览器计算出来。参见 https://developer.mozilla.org/en-US/docs/Web/CSS/calc了解更多。

支持越来越好(根据 caniuse.com，78%)，但您不能依赖它。

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