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

Question

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

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

导航DIV目前有以下CSS：

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

身体的最小宽度为900px。

我对此设置有两个问题：

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

2. 导航系统不尊重身体的最小宽度，即使浏览器窗口的宽度小于900px，它仍继续向左移动，而页面内容的其余部分不会“T

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

谢谢，

尼克

Answer 1

我会做的是

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

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

3. 将图片的中间部分放入100％宽的div

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

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