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

Question

我有一个长图像，目前用作开发中网站的导航系统。你可以看到它here。这个导航系统最终会被分成更小的部分，但我想我很可能会看到我现在看到的相同问题。

图像的宽度为 1920 像素，其想法是，无论用户的浏览器窗口有多宽（最大为 1920 像素），导航图像（分支）都将始终延伸到屏幕之外。导航系统中心的叶子应始终位于页面中心以匹配上面的徽标。

导航 DIV 目前具有以下 CSS：

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

body 的最小宽度为 900px。

此设置有两个问题：

1. 正如您在访问页面时所看到的，浏览器页面的宽度是由导航系统的长图像的右边缘设置的，当我希望它设置为 100% 时浏览器窗口宽度大于 900px，当浏览器窗口宽度小于 900px 时为 900px（带有水平滚动条）。

2. 导航系统不遵守正文的最小宽度，即即使浏览器窗口的宽度小于 900 像素，它也会继续向左移动，而页面的其余内容则不会't.

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

谢谢，

尼克

Answer 1

我会做的是

1. 剪掉图片的中间部分（有实际内容的部分）。

2. 从线条背景中取出可以无限重复的切片。像这样：

3. 把图片的中间部分放到一个100%宽的div中

   background-image: url(/path/to/slice.png);
   background-repeat: repeat-x;
   

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