Question

我一直在寻找相当一段时间，并且此时感觉我在浪费它而没有呈现我当前的情况。我正在尝试为具有响应背景图像的网站创建登录页面。我对图像宽度的响应性没有问题。它将拉伸并响应Web浏览器的缩放。但是，我无法让它适应Web浏览器的高度。实际上，它距离浏览器顶部只有1英寸，而且没有进一步。我看过很多解决方案，但大多数建议我已经做过的事情。作为一方，我试图使用Rails来做到这一点。我创建了一个root static-page#home，并且正在home.html.erb和static_pages.css.scss中的static-page文件夹中工作。这是我的代码：

home.html.erb：

<div class="jumbotron debug">
 <div class="container">
 </div>
</div>

static_pages.css.scss：

.jumbotron {
  background: url(http://www.wolmer.lt/wp-content/uploads/2013/12/tree-of-light-daughter.jpg) no-repeat center center;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -o-background-size: 100% 100%;
}

现在，background-size: 100% 100%;应该是最初将图像缩放到100％高度和100％宽度的行，如果我没有弄错的话。我仍然没有这样的运气。我甚至尝试将html和body标记设置为height: 100%，但没有做任何事情。也许我错过了什么。任何帮助将不胜感激。

我尝试过的一件事是修复......但不一定是解决方案。我已将background-size设置为cover并为我的图像设置了一个设定的高度。这可以起作用，但由于高度没有响应，它会失败。总而言之，主要问题是我无法将jumbotron类的高度设置为100％。设置html, body { height: 100%; }似乎也没有帮助。

Answer 1

这是因为容器本身是空的。很高兴提供背景图片来填充空间，但这种情况下的空间是空的。

因此，要解决此问题，请确保页面高度始终是浏览器的高度。

# css style
html,body { height: 100%; }

.jumbotron {
  background: url(http://www.wolmer.lt/wp-content/uploads/2013/12/tree-of-light-daughter.jpg) no-repeat center center;
  background-size: 100% 100%;
  height: 100%;
  -moz-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -o-background-size: 100% 100%;
}

Answer 2

好吧，我能够真正找出为什么将FORMAT(Date, 'yyyy/mm/dd'高度设置为100％不起作用以及为什么设置jumbotron无效。问题是html和body不是100％，所以当我将html, body { height: 100%; }类设置为100％高度时，它只会填充html / body所在的100％。当将html / body设置为100％高度时，它会增加窗口大小的高度，但jumbotron类将保持其正常高度96px（这是因为内部的jumbotron div container div。所以，当我将jumbotron类设置为高度100％和html / body时，它就可以了。

这可能有意义也可能没有意义，但那是解决我问题的方法。感谢那些帮助过的人。

敏感的背景图像 - 用红宝石在铁路上的bootstrap jumbotron

2 个答案: