css - 扩展到图像宽度的容器，但将其他按钮和 div 包含在其中

Question

所以我有一个包含四个主要部分的站点。每个部分的 div 都有一个背景图像。所有四个背景的大小都相同。图片中也有一些我一直想展示的重要元素。在页面的原始版本中，图像会根据浏览器窗口大小调整大小，但在大多数情况下，背景图像的大部分高度都被隐藏了。所以我和一个清理 CSS 的人一起工作，在这个过程中我们将背景图像设置为始终显示 100% 高度。只要我保持高度，我就可以在必要时在两侧显示一些黑色背景。

总之效果不错。图像随浏览器宽度扩大和缩小，但它们始终显示图像的完整高度。我签了这份工作，看起来不错。直到我改变了浏览器窗口的高度(这是我很少想做的事情)。然后元素全部溢出到 4 个主要 div 的左右两侧。我现在意识到文档中没有任何内容指定任何部分的宽度，只是 100vh 处的高度。只有所有四个背景图像都具有相同尺寸这一事实使它看起来像是定义了边距。

有没有简单的解决方法？我需要为页面定义左右边框以包含所有内部 div 和按钮，但我想保持 4 个主要 div 显示 100% 的垂直高度。

我们正在使用

            background-attachment: fixed;
            background-size: cover;
            background-repeat: no-repeat;
            min-height: 100vh;

定义四个 div 中的每一个。基本上我需要一个围绕 4 个主要部分的容器，它扩展到图像的宽度，同时仍然允许图像随窗口调整大小，但它包含所有其他按钮和 div。

页面可以在这里看到:view-source: http://liquidpropane.io/hold/它现在的工作方式与我想要的完全一样，只是如果浏览器窗口太短，按钮会溢出两侧。

Answer 1

感谢贾斯汀的帮助。最后我不得不重新考虑设计。我想保留使用背景拼贴画的想法，但保留响应式设计。我将主页 Logo 从背景图像中移到了横幅部分。然后我将拼贴画的重要部分移到主图像的中心部分，将不太重要的部分移到两侧。这样在两侧裁剪就没有关系了。最后，我决定从第 1 部分和第 3 部分中删除圆形文本框。我将只在这些页面上使用一小部分着陆页文本(相当大的细字体)，并将大部分内容放在第 2 部分和第 4 部分中.我还没有添加那个文本，但是背景和横幅的清理版本可以在http://liquidpropane.io/newhold看到

我想我的情况并非特有的要点是，如果背景图像中的信息很重要并且您想要一个响应式网站，那么图像的重要部分需要居中，因为总是有可能在边缘裁剪。