3

我有两个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 将背景图像设置为 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 的高度，使它们与背景图像高度的大小一样高，从而消除空白？

4

3 回答 3

1

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

如果您有一个具有 % 宽度（即未知像素宽度）的 DIV，那么您无法在不借助 JavaScript 的情况下根据此未知宽度设置高度，或者...新的 CSS calc() 函数，您可以在其中指定高度作为未知宽度的比率，让浏览器解决。有关更多信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/calc。

支持越来越好（根据 caniuse.com 的数据为 78%），但您不能依赖它。

[编辑] 在自己寻找解决方案时，我发现了一个使用 padding-top 的出色技巧，由用户Hasanavi在回答这个问题时编写[/edit]

于 2014-10-21T08:18:11.797 回答
-1

您可以使用

height:auto; in both
于 2013-04-08T08:36:02.747 回答
-1

您可以尝试line-height在您的 div 上使用 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

希望这可以帮助...

于 2013-04-08T07:01:05.363 回答