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

Question

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

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

导航 DIV 当前具有以下 CSS：

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

主体的最小宽度为 900 像素。

这个设置有两个问题：

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

2. 导航系统不考虑主体的最小宽度，即即使浏览器窗口的宽度小于 900 像素，它也会继续向左移动，而页面内容的其余部分则不会。

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

谢谢，

缺口

Answer 1

我会做的是

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

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

3. 将图像的中间部分放入div100% 宽且具有

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

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