Css 可扩展到图像宽度的容器，但其中包含其他按钮和div

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

不管怎样，它工作得很好。图像随着浏览器的宽度而扩展和收缩，但它们始终显示图像的完整高度。我签下了这份工作，看起来不错。直到我改变了浏览器窗口的高度（这是我很少想到要做的事情）。然后所有元素都溢出到4个主分区的右侧和左侧。我现在意识到，文档中没有指定任何部分的宽度，只有100vh的高度。只有所有四个背景图像都具有相同的尺寸这一事实才使得它看起来像是有定义的边距

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

我们正在使用

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

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

可在此处看到该页面：查看来源：

---

它现在的工作原理与我想要的完全一样，只是如果浏览器窗口太短，按钮会从侧面溢出。

谢谢Justin的帮助。最后，我不得不重新考虑设计。我想保留使用背景拼贴的想法，但保留反应灵敏的设计。我将主页徽标从背景图像移到了横幅部分。然后我将拼贴的重要部分移到主图像的中心部分，将不太重要的部分移到侧面。这样，两边的修剪就不重要了。最后，我决定删除第1节和第3节中的圆形文本框。我将在这些页面上使用一小部分登录页文本（非常大，字体很薄），并将大部分内容放在第2节和第4节中。我还没有在中添加该文本，但是可以在

---

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

如果您将图像放入元素中，并且该元素没有定义的

width

值，该元素将是包含图像的宽度（直到视口的宽度）-。那可能不是你真正想要的。此外，链接的代码与用于背景图像元素的代码不同，

background size:cover

可能更合适，但您的元素使用的是

背景大小：auto 100%-我不清楚您想要实现什么，但似乎您需要完全重写代码谢谢Justin。我正在查看每个div的代码，但没有注意到.container的背景是这样指定的。我把它改成了封面，解决了包含其他元素的问题。删除容器的最大大小1280 px也修复了第1节的宽度问题。现在我又回到了我原来的问题。我不能裁剪这些背景图像的高度。左上角至关重要，其他细节也是如此。我需要确保它们显示100%的图像高度。我可以在侧面显示黑色背景。如果要确保显示完整高度，可以使用
背景尺寸：contain
。正如您所提到的，根据视口的高度/宽度，它可能无法填充整个宽度。谢谢你，贾斯汀。这解决了背景图像的问题，与我们原来的方法略有不同，但它带来了当视口太短时所有内部div溢出页面两侧的原始问题。。我仍然认为解决方案将涉及一些方法，围绕第1-4节的图像宽度包装一个容器，以定义其他内部元素的左右边界。我就是不知道怎么做。如果我找不到解决方案，我可能不得不重做图像，使侧面逐渐变为纯色棕褐色，并对divs 2、4和背景使用相同的纯色。很难根据背景图像位置定位元素，尤其是在开发响应性设计时。正如你所看到的，在一个尺码上看起来不错的，在另一个尺码上可能看起来很简陋。根据我所看到的，您可能希望利用媒体查询来实现这一点。然而，我可能会重新考虑基于背景图像的设计。