如何防止超出浏览器窗口设置页面宽度的图像？

Question

我有一个长期的形象，目前作为一个网站的导航系统正在开发。你可以看到它，这里。这个导航系统最终将被分成更小的部分，但我想我很可能会看到我现在看到的同样的问题。

图像是192 to宽，其思想是，无论用户的浏览器窗口多宽(高达192 to)，导航图像(分支)总是会从屏幕上延伸出去。导航系统中心的叶子应始终以页面为中心，以与上面的徽标相匹配。

导航DIV当前具有以下CSS：

#nav {
    position: absolute;
    top: 210px;
    left: 50%;
    margin-left: -960px;
}

车身的最小宽度为900 of。

我在这个设置中有两个问题：

1. 正如您在访问该页时所看到的，浏览器页的宽度是由导航系统的长图像的右侧边缘设置的，当浏览器窗口的宽度大于900 be时，我希望将其设置为100%，当浏览器窗口的宽度小于900 be时，设置为900 be(带有水平滚动条)。
2. 导航系统不尊重主体的最小宽度，也就是说，即使浏览器窗口的宽度小于900 of，它也会继续向左移动，而其余的页面内容则不会。

有人能帮忙解决这些问题吗？

谢谢,

尼克

Answer 1

我会做的是

1. 去掉图像的中间部分(有实际内容的部分)。
2. 从线条背景中取出一个可以无限重复的片段。就像这样：

​

1. 将图像的中间部分放入一个100%宽的div中 背景-图像:url(/path/to/sle.png)；背景-重复:重复-x；

这将为您提供一个无限大小的导航区域，而无需不必要地展开页面。