1

首先你会在这里找到我的网站。

我有 div：

<div class="home" style="background-image: url(http://payload51.cargocollective.com/1/7/237315/3336908/HomeImage_o.jpg); background-attachment: fixed; height: 660px; width: 100%; opacity: 1; background-position-y: 0px; background-position-x: center; background-repeat: no-repeat no-repeat; background-size: 100%;"> 
</div>

还有一些与该 div 相关的 CSS：

div.home {
    width: 100%;
    margin-bottom: 30px;
    min-width: 100%; height: auto;
}

正如你所看到的，有一个margin-bottom但由于某种原因，棕色菜单和它下面的文本是：

  1. 当浏览器失去宽度时，距离图像太远。
  2. 两者都不响应浏览器，当浏览器变小时，文本会移得更远。

这是一个jsfiddle，如果这有点偏离，请道歉 - 仍然掌握 Jsfiddle。

4

3 回答 3

2

这个怎么样：更新了 jFiddle，基本上我将背景图像添加为 DIV 容器的子 IMG 以便填充。然后，您可以控制此 DIV 的大小以使其具有所需的外观。

我不认为我完全理解你的追求，所以如果这是朝着错误的方向道歉。

于 2012-08-09T08:17:05.913 回答
1

它与边距底部无关。div 设置为 660px 高度。如果浏览器窗口对于背景图像不够宽，它将相应地缩放，保持纵横比。这看起来好像边距变宽了，但实际上它是显示为空的 div 的一部分。我不完全确定你想要做什么，但一个想法可能是动态调整 div 的高度。

于 2012-08-09T08:25:18.250 回答
1

我认为问题在于它content_container比菜单更宽。如果您在页面上更改此行： 

<div id="content_container" style="width: 816px;">

对此：

<div id="content_container" style="width: 720px;">

...效果更好

于 2012-08-09T08:25:56.143 回答