不同屏幕比例的 Jumbotron 问题答案

【问题标题】：Jumbotron issue with different screen ratios不同屏幕比例的 Jumbotron 问题
【发布时间】：2018-05-11 06:43:43
【问题描述】：

我在为网站设计 jumbotron 时遇到了一个问题。它在容器外面。为它创建了一个背景，将背景大小设置为覆盖，效果很好。

当我在更宽的屏幕上打开首页时，jumbotron 变大了，并且由于背景图像太宽而出现间隙。

然后我尝试了 background-size: 100% 100%，认为图像会拉伸。没有变化。以为我可能有边距/填充问题。没有任何变化。

这是图像问题还是 jumbotron 问题？我不知道如何解决这个问题。无论我选择什么图像，它在不同设备上的表现都非常不同。

【问题讨论】：

也许显示一些代码，以便我们都可以盯着它。

标签： css sass bootstrap-4

【解决方案1】：

在不同设备上表现不同不是错误，而是一项功能。话虽如此，试试这个......

background-image: url(INSERT_URL_HERE);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;

【讨论】：

我试过了，它现在延伸到顶部、左侧和右侧，但距离 jumbotron 底部大约一英寸是空白的。我尝试检查浏览器中的元素，其他一切似乎都很好。尝试将 !important 放在所有这些旁边，但没有发生任何不同。
请向我们提供与您的 jumbotron 和周围元素相关的 HTML 代码，以便我们无需猜测就能有效地帮助您。
对我想使用的图像没有任何帮助。在inkscape中对其进行一些更改并再次将其导出，并结合您为我提供的帮助。我真的不知道这是什么原因造成的。它们几乎完全相同。

【解决方案2】：

如果您希望图像拉伸以适合整个元素（即使这意味着失去比例），您需要将background-attachment 设置为固定，将background-size 设置为 100%。喜欢：

 .jumbotron {
     background-image: url(image.url);
     background-size: 100% 100%;
     background-attachment: fixed;
  }

工作示例：

https://jsfiddle.net/4w9u7m1a/2/

【讨论】：

没用，它现在表现得好像我已经将背景图像设置为一个容器，即使 jumbotron 本身在它之外。这很令人困惑。尝试在我的浏览器中检查它，并且 html 没有任何问题。我真的不知道该怎么办。
一定要为jumbotron提供html。（对我来说）你所说的“它在它之外”是没有意义的。