响应式背景图像 - 使用 Ruby on Rails 引导 jumbotron答案

【问题标题】：Responsive background image - bootstrap jumbotron with Ruby on Rails响应式背景图像 - 使用 Ruby on Rails 引导 jumbotron
【发布时间】：2016-04-14 23:00:21
【问题描述】：

我一直在寻找很长一段时间，在这一点上，我觉得我没有展示我目前的情况是在浪费它。我正在尝试为具有响应式背景图像的网站创建登录页面。我对图像宽度的响应没有问题。它将拉伸并响应 Web 浏览器的缩放。但是，我无法让它适合网络浏览器的高度。事实上，它仅从浏览器顶部向下约 1 英寸，仅此而已。我看过很多解决方案，但大多数都建议我已经做过的事情。另一方面，我正在尝试使用Rails 来做到这一点。我创建了一个root static-page#home 并在home.html.erb 和static_pages.css.scss 的静态页面文件夹中工作。这是我的代码：

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%; } 似乎也无济于事。

【问题讨论】：

您检查过body 和html 元素的高度吗？有时它们的高度为0。尝试将 html,body{height:100%} 添加到您的 CSS。

标签： html css ruby-on-rails twitter-bootstrap

【解决方案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%;
}

【讨论】：

【解决方案2】：

好的，我实际上能够找出为什么将 jumbotron 高度设置为 100% 不起作用以及为什么设置 html, body { height: 100%; } 不起作用。问题是 html 和 body 不是 100%，所以当我将 jumbotron 类设置为 100% 高度时，它只会填充 html/body 所在位置的 100%。当将 html/body 设置为 100% 高度时，它会将高度增加到窗口大小，但 jumbotron 类将保持在正常高度 96px（这是因为 container div 在 jumbotron div 内. 所以当我将jumbotron 类设置为 100% 的高度并且 html/body 它起作用了。

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

【讨论】：