0

我有一个 ember 应用程序，它建立在 Rails 后端之上，Foundation 作为响应式框架。

在主页 index.hbs 上，我想显示一个背景图像，其大小与浏览器的宽度/高度相同。为此，在我的 index.hbs 文件中，我有以下内容：

<div class="row">
  <div class="large-12 columns home-bg">
    <h1>EW</h1>
</div>

我在我的 css 文件中将 .row 设置为 100% 的宽度。然后将 .home-bg div 调整为浏览器的大小，我在 index_view.coffee 中有以下内容

App.IndexView = Ember.View.extend(didInsertElement: ->
  $(window).resize ->
    $(".home-bg").height $(window).height()
)

最后，在我的 css 文件中：

.home-bg {
  background: image-url("home_bg.png") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

但是当我加载页面时，没有计算 div 的高度，甚至没有加载背景图像，它似乎是一个断开的链接。我在 /assets/images 中有图像。

谢谢你的帮助。

4

1 回答 1

1

我想这是因为当你抓住角落时，resize事件是第一次发送，因此 div 得到了它的大小设置。

试试这个肮脏的技巧，看看它是否在开始时也能正常工作，而无需先调整窗口大小：

App.IndexView = Ember.View.extend(didInsertElement: ->
  $(".home-bg").height $(window).height()
  $(window).resize ->
    $(".home-bg").height $(window).height()
)
于 2013-08-26T21:07:39.383 回答