Question

首先，您会找到我的网站here.

我有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但由于某种原因，下面的棕色菜单和文字是：

当浏览器宽度变宽时离图像太远。
两者都没有响应浏览器，当浏览器变小时，文本移动得更远。

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

Answer 1

这个怎么样：updated jFiddle，基本上我把背景图片添加为DIV容器的子IMG，所以它填满了。然后，您可以控制此DIV的大小调整，使其具有您想要的方面。

我认为我并不完全理解你所追求的是什么，所以如果朝着错误的方向前进而道歉。

Answer 2

它与margin-bottom无关。 div设置为660px高度。如果浏览器窗口的宽度不足以用于背景图像，则会相应地缩放，保留纵横比。这看起来好像边缘变得更宽，但实际上它是div的一部分显示为空。我不完全确定你想做什么，但一个想法可能是动态调整div的高度。

Answer 3

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

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

到此：

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

......它的效果更好

保证金底部不使用脚本

3 个答案: