Html 正在计算“背景大小”属性的断点

我有一个以大图像为背景的居中视口。由于页面上有其他元素，我们根据这些其他元素的大小选择了一些断点。到目前为止，我的布局很好

其中一个问题是，由于所使用的图像不够高，一旦图像达到一定大小，背景颜色就会显示出来，并且在图像的两侧都会引入条形图。这与图像与视口的比率有关

带条的解决方案：

现在，这里的解决方法是找到在什么点引入了这些条。任何大于该大小的值，直到截止值意味着

背景大小

需要更改为

背景大小：100%自动与之前设置为<代码>背景大小时的对比：自动100%

固定解决方案：

现在我的问题是，我如何从数学上计算出“幻数”截止值？在我的示例中，我只是使用窗口大小来查找我应该在这里使用的实际数字，这确实不是最佳值。
为什么不将背景大小设置为
封面
？它将按比例缩放背景图像，以填充容器，而不管大小如何

div.container {
  background-size: cover;
}

您可以使用带有垂直填充的伪元素（以%为单位），该元素将使用元素宽度作为引用。无论宽度是否更新，比率都将保持不变：


.hero{
背景色：#0a6ba1；
}
#标题{
背景图像：url（'https://suretybonds.com/img/bonds/giant-header/inspector-1800.png');
背景重复：无重复；
背景尺寸：100%自动；
溢出：隐藏；
保证金：0自动40px；
最大宽度：1600px；
位置：相对位置；
}
#标题：之前{
内容：''；
显示：内联块；
填充：26%0；
}
@介质屏幕和（最小宽度：699px）和（最大宽度：1465px）{
#标题{
} 
}
@媒体屏幕和（最小宽度：0）和（最大宽度：699px）{
#标题{
} 
}
@媒体屏幕和（最小宽度：0）和（最大宽度：500px）{
#标题{
} 
}
/*演示额外费用*/
#标题{
文本对齐：居中；
字体大小：4vw；
}
#标题：之前{
垂直对齐：中间对齐；
}
调整窗口宽度
现在我的问题是如何从数学上计算出“幻数”截止值？
，这是css的处理工作，而我们使用百分比：D@NiCkNewman其余断点不使用百分点；其中大多数实际上是指在mixin中设置的
sass
静态变量。在我看来，问题的根源在于图像和可视区域之间的大小比例。如果你能给我一个很好的解决办法，让我知道！忘了提及：以整页模式运行代码段，然后调整浏览器的大小：），这可能会正常工作。我不知道那里有这样的房子！为了让读者进一步了解，使用
背景大小：cover适用于Opera mini用户。